初识 ajax

最新推荐文章于 2022-01-12 12:12:51 发布

yanguicehn

最新推荐文章于 2022-01-12 12:12:51 发布

阅读量70

点赞数

本文链接：https://blog.csdn.net/yanguicehn/article/details/115406203

版权

ajax加载步骤

加载并执行一个 JS 文件。

jQuery 代码:
$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
});

保存数据到服务器，成功时显示信息。

jQuery 代码:
$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});

装入一个 HTML 网页最新版本。

jQuery 代码:

$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});

$.ajax();
参数：
1）type 请求方式，get/post
url: “https://p.3.cn/prices/mgets” data: { skuIds: “J_100010378153” } http://localhost:8080/studenetController 2）url 请求地址，https://p.3.cn/prices/mgets?skuIds=J_100010378153
3）dataType 指定返回数据类型，json，跨域（错误），jsonp
CORS policy: No ‘Access-Control-Allow-Origin’
原因：js特点，弱语言，它是为浏览器而生（安全，不允许本地文件，不允许调用其他网站资源，安全策略：不允许跨域域名baidu.com,tedu.cn） CORS policy： No ＇Access-Control-Allow-Origin＇不能跨越访问其他网站，1）不能不同域名 localhost,baidu.com 2）baidu.com:80，baidu.com:8080，不能端口号不同

localhost，p.3.cn（域名不同，算跨域，不允许）

解决：
dataType:“jsonp”

实际开发中就发生跨域的问题，我的localhost需要京东的网站p.3.cn
推出新的技术，jsonp，fun(json)
jQuery支持jsonp方式，它会自动命名fun名字
json值是京东请求后的结果，套上函数，jquery请求，&jQuery123传递京东网站
京东网站查询某个商品数据，返回json
京东网站里有传入名字，封装：jQuery123(json); 把这个结果返回
jQuery110206847092573562594_1617344264559 ( [{“p”:“17999.00”,“op”:“17999.00”,“cbf”:“0”, “id”:“J_100010378153”,“m”:“100000.00”}] ); 京东网站封装结果本质字符串，截串，按(开始，)结束，substring截取字符串，中间结果json var arrays = JSON.parse(json);

4）响应，函数中，success: function(data){ 解析data } 匿名函数，ajax它会把返回结果放在data对象中

里面参数是一个js对象

$.ajax({
type: “get”,
url: “https://p.3.cn/prices/mgets?skuIds=J_100010378153”,
dataType: “jsonp”,
success: function(data){
//解析 data是一个json字符串已经被转换js对象
[{“p”:“1799.00”,“op”:“17999.00”,“cbf”:“0”,“id”:“J_100010378153”,“m”:“100000.00”}]

	data[0].p
	data[0].id
}

});
发送 XML 数据至服务器。设置 processData 选项为 false，防止自动转换数据格式。

jQuery 代码:

 var xmlDocument = [create xml document];
 $.ajax({
   url: "page.php",
   processData: false,
   data: xmlDocument,
   success: handleResponse
 });

练习代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>京东某个商品价格信息</title>
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<div>
			商品编号：<span id="id"></span>
		</div>
		<div>
			商品价格：<span id="price"></span>
		</div>
	</body>
	<script>
		//1.实现写死json字符串，解析展现到页面上
		//var jsonstr = '[{"p":"1799.00","op":"17999.00","cbf":"0","id":"J_100010378153","m":"100000.00"}]';
		
		//2. 获取价格和编号
		//var obj = JSON.parse(jsonstr);	//把字符串转换js对象
		
		//发起ajax请求
		$.ajax({
			type: "get",
			url: "https://p.3.cn/prices/mgets?skuIds=J_100010378153",
			dataType: "jsonp",
			success: function(data){
				console.log(data);
				var obj = data;		//把data赋值给obj
				
				var price = obj[0].p; //获取到数组第一条记录，访问p属性
				var id = obj[0].id;
				
				console.log(price);
				console.log(id);
				
				//3. 把内容写到页面，进行展现
				$("#id").text(id);		//span标签属性写法
				$("#id").css("color", "blue"); //渲染render
				
				$("#price").text(price).css("color","red");		//链式编程
			}
		});
		
		

	</script>
</html>