AJAX

多啦@不懂a梦

于 2021-11-19 21:11:58 发布

阅读量387

点赞数 1

分类专栏：前端文章标签： java 开发语言后端

本文链接：https://blog.youkuaiyun.com/qq_55624813/article/details/121431116

版权

前端专栏收录该内容

10 篇文章

订阅专栏

ajax

概念

Ajax 即Asynchronous Javascript And XML( 异步的 )

Ajax并不是一种新的编程语言，而是多种技术的综合应用

Ajax是 客户端 的技术，它可以实现 局部刷新 网页

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

原理

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bJcZLtUh-1622609771162)(RackMultipart20210602-4-1s7eaya_html_a3c5ab779ef32318.png)]

格式

七个参数：

$.ajax({
	type:  //要使用的请求方式
	url:  //要使用的请求路径 
	contentType: //要传递的数据类型
	data:  //要拼接的数据
	dataType:  //数据类型
	success: function(data){ //成功时的方案 
		
	},
	error: function(data){ //失败时的方案
		
	}
})

ajax.html

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.8.3.min.js"></script>
	<script>
		$(function(){//文档就绪事件
			$.ajax({ //发起Ajax请求数据
				type: "POST",
				url: "http://p.3.cn/prices/mgets",
				contentType: "application/json;charset=utf-8",
				data: {		//拼接的参数
					"skuIds": "J_100003717483"
				},
				dataType: "jsonp",
				success: function(data) {	//返回的结果
//[{"cbf":"0","id":"J_100003717483","m":"10000.00","op":"2499.00","p":"2099.00"}]
					$('#p1').text("返回数据：" + JSON.stringify(data));
					$('#p2').text("商品编号：" + data[0].id);
					$('#p3').text("商品价格： " + data[0].op);
				},
				error: function(data) {
					alert("提交失败" + JSON.stringify(data));
				}
			});
		});

	</script>
</head>
<body>
	<p id="p1">这是p1</p>
	<p id="p2">这是p2</p>
	<p id="p3">这是p3</p>
</body>
</html>