首页 > 其他分享 >【学亮IT手记】Ajax跨域问题精讲--jQuery解决跨域操作

【学亮IT手记】Ajax跨域问题精讲--jQuery解决跨域操作

时间:2024-09-06 12:56:40浏览次数:6  
标签:jQuery p2 p1 跨域 -- content var div

什么是跨域

跨域,它是不同的域名(服务器)之间的相互的资源之间的访问。

当协议,域名,端口号任意一个不同,它们就是不同的域。

正常情况下,因为浏览器安全的问题,不同域之间的资源是不可以访问的。

跨域的解决方案

什么情况下会用到跨域?

一般情况,是在自己的内部的工程中会出现跨域的情况。

有三种解决方案:

1.服务器跨域(代理方案)

2.jsonp,<script>标签的开发策略。

3.XHR2,HTML5提供,一般是在移动开发中使用。

jQuery解决跨域操作

在jquery中可以使用$.ajax,$.getJSON,$.getScript来解决跨域问题。

前端html/js部分代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>案例-显示商品信息</title>
<script type="text/javascript"
	src="/jquery_crossDomain/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	$(function() {
		//将div隐藏
		$("#content").hide();
		$("#a").toggle(function() {
			//向服务器发送请求,得到商品信息,在页面上展示 
			var url = "http://localhost:8080/jquery_ajax/product?callback=?"
			$.getJSON(url,function(data) {
				var jsonObj = eval(data);
				//[{"count":100,"id":1,"name":"电视机","price":2000},{"count":200,"id":2,"name":"洗衣机","price":1000}]
				//处理响应json数据,封装成table的html代码
				var tab = $("<table border='1'><tr><td>编号</td><td>名称</td><td>数量</td><td>价格</td></tr></table>");

				for (var i = 0; i < jsonObj.length; i++) {
					var obj = jsonObj[i];
					var tr = $("<tr><td>"
							+ obj.id
							+ "</td><td>"
							+ obj.name
							+ "</td><td>"
							+ obj.count
							+ "</td><td>"
							+ obj.price
							+ "</td></tr>");
					//内部插入操作
					tab.append(tr);
				}
				//将table在添加到div中
				$("#content").append(tab);

				//显示div
				$("#content").fadeIn(1500);

			});
		}, function() {
			//将商品的信息隐藏
			//将div隐藏
			$("#content").fadeOut(1500);
			//清空div
			$("#content").html("");
		});
	});
</script>
</head>
<body>
	<a href="javascript:void(0)" id="a">显示商品信息</a>
	<hr>
	<div id="content"></div>
</body>
</html>

后台java代码部分:

public class ProductServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String callback=request.getParameter("callback");
		//处理响应数据的中文乱码
		response.setCharacterEncoding("utf-8");
		Product p1 = new Product();
		p1.setId(1);
		p1.setCount(100);
		p1.setName("电视机");
		p1.setPrice(2000);

		Product p2 = new Product();
		p2.setId(2);
		p2.setCount(200);
		p2.setName("洗衣机");
		p2.setPrice(1000);

		List<Product> list = new ArrayList<Product>();
		list.add(p1);
		list.add(p2);
		// 将其转换成json响应到浏览器 fastjson进行java对象到json之间的转换
		String json = JSONObject.toJSONString(list);
		response.getWriter().write(callback+"("+json+")");
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

--end--



标签:jQuery,p2,p1,跨域,--,content,var,div
From: https://blog.51cto.com/zhangxueliang/11937111

相关文章

  • AS-V1000视频监控平台客户端播放实时视频时,一些视频画面显示的时间不准确的解决方法
    目录一、背景说明二、解决过程  1、查看设备时间  2、查看服务器时间  3、ntp介绍  1)ntp的概念  2)ntp的同步方式  3)ntp的优势  4、自动校准服务器和设备时间  1)下载ntp  2)修改ntp.conf  3)重启ntp服务,自动校准时间......
  • springboot基于BS的社区物业管理系统
    系统包含:源码+论文所用技术:SpringBoot+Vue+SSM+Mybatis+Mysql免费提供给大家参考或者学习,获取资料请私聊我目录第一章绪论 11.1选题背景 11.2选题意义 11.3研究内容 2第二章开发环境 32.1Java语言 32.2MYSQL数据库 32.3Eclipse开发工具 42.4Spri......
  • HashMap和ConcurrentHashMap对比源码分析
    1.1HashMap分析1.1.1JDK7的HashMap HashMap在日常开发中是很常见的,在JDK7中其底层是由数组+链表构成,数组被分成一个个桶(bucket),通过哈希值决定了键值对在这个数组中的位置。哈希值相同的键值对,会以链表形式进行存储。每一个键值对会以一个Entry实例进行封装,内部存在四个......
  • Python量化交易股票投资,是百战百胜的吗
    Python股票接口实现查询账户,提交订单,自动交易(1)Python股票程序交易接口查账,提交订单,自动交易(2)炒股真有百战百胜之法?在充满变数的股票市场中,许多投资者都梦寐以求一种能够百战百胜的炒股方法。现实真的如此理想吗?K线图的奥秘K线图的构成与意义K线图由开盘价、收盘价......
  • 2024年全国大学生数学建模-A 题 “板凳龙” 闹元宵-解题思路参考
    “板凳龙”,又称“盘龙”,是浙闽地区的传统地方民俗文化活动。人们将少则几十条,多则上百条的板凳首尾相连,形成蜿蜒曲折的板凳龙。盘龙时,龙头在前领头,龙身和龙尾相随盘旋,整体呈圆盘状。一般来说,在舞龙队能够自如地盘入和盘出的前提下,盘龙所需要的面积越小、行进......
  • 回归预测 | MATLAB实现PSO-LSTM(粒子群优化长短期记忆神经网络)多输入单输出
    回归预测|MATLAB实现PSO-LSTM(粒子群优化长短期记忆神经网络)多输入单输出目录回归预测|MATLAB实现PSO-LSTM(粒子群优化长短期记忆神经网络)多输入单输出预测效果基本介绍模型介绍PSO模型LSTM模型PSO-LSTM模型程序设计参考资料致谢预测效......
  • 2024年全国大学生数学建模-B 题 生产过程中的决策问题-解题思路参考
    某企业生产某种畅销的电子产品,需要分别购买两种零配件(零配件1和零配件2),在企业将两个零配件装配成成品。在装配的成品中,只要其中一个零配件不合格,则成品一定不合格;如果两个零配件均合格,装配出的成品也不一定合格。对于不合格成品,企业可以选择报废,或者对其进......
  • 蓝桥杯-STM32G431RBT6工程创建和程序烧录(保姆级图文详解)
    文章目录前言蓝桥杯嵌入式赛道所使用的开发板为STM32G431RBT6 CT117E-M4开发板(新版),如下图:一、需要安装的环境keilMDK,stm32cubemx,官方提供的资源包二、使用步骤(STM32cubemx部分)1,首先打开STM32cubemx注:蓝桥杯用HAL库更节省比赛时间,也更方便修改2,创建项......
  • 综合评价 | 基于熵权-变异系数-博弈组合法的综合评价模型(Matlab)
    目录效果一览基本介绍程序设计参考资料效果一览基本介绍根据信息熵的定义,对于某项指标,可以用熵值来判断某个指标的离散程度,其信息熵值越小,指标的离散程度越大,该指标对综合评价的影响(即权重)就越大,如果某项指标的值全部相等,则该指标在综合评价中不起作用。因此,......
  • Java什么情况下会Broken pipe java.io.ioexception broken pipe
    最近项目上出现了java.io.IOException:Brokenpipe问题,后边,又出现了org.apache.catalina.connector.ClientAbortException:java.io.IOException:Connectionresetbypeer问题,其实,找到原因后,都是一个问题引起的。错误信息前端浏览器/小程序接口返回报错信息:net::ERR_INCOMPLETE_......