Java基础之《Ajax+JQuery（JavaEE开发进阶Ⅱ）》—JQuery与Ajax的应用（2）

csj50

已于 2022-09-26 15:24:52 修改

阅读量406

点赞数

分类专栏：前端基础文章标签： java ajax jquery

于 2022-09-09 16:07:44 首次发布

本文链接：https://blog.csdn.net/csj50/article/details/126784878

版权

前端基础专栏收录该内容

55 篇文章 0 订阅

订阅专栏

八、$.post()方法
1、通过远程HTTP POST请求载入信息。

2、它与$.get()方法的结构和使用方式都相同。

九、get请求和post请求的区别
1、GET请求将参数跟在URL后进行传递，而POST请求则作为HTTP请求实体内容发送给服务器。在Ajax请求中，这些区别对用户是不可见的。

2、GET方式对传输的数据有大小限制（通常不大于2KB），而POST方式传递的数据要比GET方式大的多。

3、GET方式请求的数据会被浏览器缓存起来，因此其他人就可以通过浏览器的历史记录中读取到这些数据，例如密码等，所以GET请求安全性会有问题，而POST相对就可以避免这些问题。

十、$.getScript()方法
1、通过HTTP GET请求载入并执行一个JavaScript文件。
语法：

$.getScript(url, [callback])

说明：
（1）url：待载入JS文件地址。
（2）callback：成功载入后回调函数。

十一、$.getJson()方法
1、通过HTTP GET请求载入JSON数据。
语法：

$.getJSON(url, [data], [callback])

说明：
（1）url：发送请求地址。
（2）data：待发送key/value参数。
（3）callback：载入成功时回调函数。

十二、getScript()方法和getJSON()方法例子
getother.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test getother</title>

<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
	$(function(){
		$("input:eq(0)").click(function(){
			//加载js文件功能
			$.getScript("script/my.js",function(){
				f();
			});
		});
		
		$("input:eq(1)").click(function(){
			//加载外部json文件功能
			$.getJSON("script/myJson.json",function(data){
				var name = data.name;
				var age = data.age;
				$("<p>用户名："+name+"，年龄："+age+"</p>").appendTo($("#content"));
			});
		});
		
		$("input:eq(2)").click(function(){
			//加载外部json文件功能
			$.getJSON("http://localhost:8080/AjaxPro/GetJSONServlet",function(data){
				//获得json数据
				var students = data.students;
				var res = "<ul>\n";
				for (var i=0;i<students.length;i++){
					//从json数组里取出json对象
					var student = students[i];
					res+="<li>"+student.name+"--"+student.password+"</li>\n";
				}
				res+="</ul>";
				//把标签字符串生成一个节点对象，追加到content元素内
				$(res).appendTo($("#content"));
			});
		});
	})
</script>

</head>
<body>
	<input type="button" value="getScript" /><br/>
	<input type="button" value="getJSON" /><br/>
	<input type="button" value="getWebJSON" /><br/>
	<div id="content"></div>
</body>
</html>

十三、$.ajax()方法
1、$.ajax()方法是jQuery最底层的Ajax实现。前面所讲的那些操作ajax的方法都是基于$.ajax()方法构建的，因此此方法可以替换前面的所有方法。
语法：

$.ajax({ url, [settings] })

说明：
（1）url：发送请求地址。
（2）settings：ajax请求参数设置。所有选项都是可选的。

十四、$.ajax()常用的请求参数
1、type：设置请求方式，主要是GET和POST，默认是GET
2、timeout：设置请求超时时间
3、data：发送到服务器的数据（以键值对形式发送）
4、dataType：预期服务器返回的数据类型，比如：xml、json、text等
5、beforeSend：发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头信息等
6、complete：设置完成后调用的回调函数，请求成功、失败均会调用
7、success：请求成功后被调用的回调函数
8、error：请求失败后被调用的回调函数
9、global：默认为true，表示是否触发全局ajax事件
注意：如果需要使用$.ajax()方法来进行ajax开发，那么上面这些常用参数都必须了解。jQuery的内容比较多，有些知识我们还得通过官方的api来进行巩固学习

十五、例子程序
ajax.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test ajax</title>

<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
	$(function(){
		$("input:eq(0)").click(function(){
			$.ajax({
				url: "GetJSONServlet",
				type: "get",
				dataType: "json",
				success: function(data){
					//获得json数据
					var students = data.students;
					var res = "<ul>\n";
					for (var i=0;i<students.length;i++){
						//从json数组里取出json对象
						var student = students[i];
						res+="<li>"+student.name+"--"+student.password+"</li>\n";
					}
					res+="</ul>";
					//把标签字符串生成一个节点对象，追加到content元素内
					$(res).appendTo($("#content"));
				},
				error: function(data){
					alert("失败啦");
				},
				complete: function(XMLHttpRequest, textStatus){
					alert(XMLHttpRequest.status);
				}
			})
		});
		
	});
</script>

</head>
<body>
	<input type="button" value="$.ajax()" /><br/>
	<div id="content"></div>
</body>
</html>