jquery4

最新推荐文章于 2024-06-19 09:28:13 发布

敬礼 salute

最新推荐文章于 2024-06-19 09:28:13 发布

阅读量303

点赞数

本文链接：https://blog.csdn.net/weixin_49868928/article/details/108670500

版权

jQuery - AJAX 简介
1.AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
语法:
$(selector).load(url,data,function(response,status,xhr))

load()	从服务器加载数据，并把返回的数据放置到指定的元素中
url	必需。规定您需要加载的 URL。
data	可选。规定连同请求发送到服务器的数据
function(response,status,xhr)	可选。规定 load() 方法完成时运行的回调函数

额外的参数：
response - 包含来自请求的结果数据
status - 包含请求的状态
（“success”、“notmodified”、“error”、“timeout”、“parsererror”）
xhr - 包含 XMLHttpRequest 对象|

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js"></script>
		<script>
			$(function(){
				$("#but1").click(function(){
              $("div").load("http://127.0.0.1:8080/ajaxdemo/studentall",
		         function(resp,status,xhr){
			       if(status=="success"){
	$("div").html("<table border='1px' width='500px'></table>");
            var jsonobj=eval("("+resp+")");
               $(jsonobj).each(function(index,element){
	var tdstring="<td>"+element.stuid+
	"</td><td>"+element.stuname+
	"</td><td>"+element.stuage+
	"</td><td>"+element.stuaddress+
	"</td>";
$('<tr></tr>').html(tdstring).appendTo('table');
			});
			/*
			if(jsonobj==null){
$('<tr></tr>').html("<td colspan='4'>没有记录</td>").appendTo('table');
}else{
	if(jsonobj.length>0){
		for(var i=0;i<jsonobj.length;i++){
		var tdstring="<td>"+jsonobj[i].stuid+
		"</td><td>"+jsonobj[i].stuname+
		"</td><td>"+jsonobj[i].stuage+
		"</td><td>"+jsonobj[i].stuaddress+
		"</td>";
		$('<tr></tr>').html(tdstring).appendTo('table');		
	   }
  }
}
*/
               }
         });
	});
});
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="测试load"/>
		<div></div>
	</body>
</html>

2.$.ajax() 执行异步 AJAX 请求
定义和用法
ajax() 方法用于执行 AJAX（异步 HTTP）请求。
所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
语法
$.ajax({name:value, name:value, … })

url	规定发送请求的 URL。默认是当前页面
type	规定请求的类型（GET 或 POST）。
data	规定要发送到服务器的数据
dataType	预期的服务器响应的数据类型
success(result,status,xhr)	当请求成功时运行的函数。
async	布尔值，表示请求是否异步处理。默认是 true
error(xhr,status,error)	如果请求失败要运行的函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js"></script>
		<script>
			$(function(){
				$("#but1").click(function(){
					//jquery的ajax方法的get方式
					$.ajax({
						url:"http://127.0.0.1:8080/ajaxdemo/studentstuidstuname?stuid=1001&stuname=zhangsan",
						async:true,
						type:"GET",
						success:function(resp,status,xhr){
							$("#main").empty();
							//
							//for(var i=0;i<resp.length;i++){
							//	rows="<tr><td>"+resp[i].stuid+
							//	        "</td><td>"+resp[i].stuname+
							//			"</td><td>"+resp[i].stuage+
							//			"</td><td>"+resp[i].stuaddress+
							//			"</td></tr>";
							//	$("#main").append(rows);
							//}
							//
						   $(resp).each(function(index,element){
							  rows="<tr><td>"+element.stuid+
							          "</td><td>"+element.stuname+
							  		"</td><td>"+element.stuage+
							  		"</td><td>"+element.stuaddress+
							  		"</td></tr>";
							  $("#main").append(rows);
						   });
						},
						dataType:"json"
					});
					
				});
				
				$("#but2").click(function(){
					//jquery的ajax方法的post方式1
					//发往服务器的数据跟随在url后面【查询字符串参数】
					/*
					$.ajax({
						url:"http://127.0.0.1:8080/ajaxdemo/studentstuidstuname?stuid=1001&stuname=zhangsan",
						async:true,
						type:"POST",
						success:function(resp,status,xhr){
							$("#main").empty();
						   $(resp).each(function(index,element){
							  rows="<tr><td>"+element.stuid+
							          "</td><td>"+element.stuname+
							  		"</td><td>"+element.stuage+
							  		"</td><td>"+element.stuaddress+
							  		"</td></tr>";
							  $("#main").append(rows);
						   });
						},
						dataType:"json"
					});
					*/
				   
				   //jquery的ajax方法的post方式2
				   //发往服务器的数据封装到http协议中【form表单提交数据】
				   $.ajax({
				   	url:"http://127.0.0.1:8080/ajaxdemo/studentstuidstuname",
				   	async:true,
				   	type:"POST",
					data:{stuid:'1001',stuname:'zhangsan'},
				   	success:function(resp,status,xhr){
				   		$("#main").empty();
				   	   $(resp).each(function(index,element){
				   		  rows="<tr><td>"+element.stuid+
				   		          "</td><td>"+element.stuname+
				   		  		"</td><td>"+element.stuage+
				   		  		"</td><td>"+element.stuaddress+
				   		  		"</td></tr>";
				   		  $("#main").append(rows);
				   	   });
				   	},
				   	dataType:"json"
				   });
				   
				});
			})
		</script>	
	</head>
	<body>
		<input id="but1" type="button" value="测试ajax()_get"/>
		<input id="but2" type="button" value="测试ajax()_post"/>
		<table id="main" border="1px" width="500px"></table>
	</body>
</html>

3. $. g e t () 使用 a j a x 的 H T T P G E T 请求从服务器加载数据语法 * *$ .get(URL,data,function(data,status,xhr),dataType)**

URL 必需。规定您需要请求的 URL。
data 可选。规定连同请求发送到服务器的数据。
unction(data,status,xhr) 可选。规定当请求成功时运行的函数。
额外的参数：
data - 包含来自请求的结果数据
status - 包含请求的状态（“success”、“notmodified”、“error”、“timeout”、“parsererror”）
xhr - 包含 XMLHttpRequest 对象
dataType 可选。规定预期的服务器响应的数据类型。
默认地，jQuery 会智能判断。
可能的类型：
“xml” - 一个 XML 文档
“html” - HTML 作为纯文本
“text” - 纯文本字符串
“script” - 以 JavaScript 运行响应，并以纯文本返回
“json” - 以 JSON 运行响应，并以 JavaScript 对象返回
“jsonp” - 使用 JSONP 加载一个 JSON 块，将添加一个 “?callback=?” 到 URL 来规定回调

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js"></script>
		<script>
			$(function(){
				$("#but1").click(function(){
					$.get("http://127.0.0.1:8080/ajaxdemo/studentstuidstuname?stuid=1001&stuname=zhangsan",
					     function(resp,status,xhr){
							 $("#main").empty();
							 $(resp).each(function(index,element){
								var row="<tr><td>"+element.stuid+
								"</td><td>"+element.stuname+
								"</td><td>"+element.stuage+
								"</td><td>"+element.stuaddress+"</td></tr>";
								 $("#main").append(row);
							 });
						 },"json");
				});
			});
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="测试get()"/>
		<table id="main" border="1px" width="500px"></table>
	</body>
</html>

4.$.post() 使用 AJAX 的 HTTP POST 请求从服务器加载数据
语法
$(selector).post(URL,data,function(data,status,xhr),dataType)
URL 必需。规定将请求发送到哪个 URL。
data 可选。规定连同请求发送到服务器的数据。
function(data,status,xhr) 可选。规定当请求成功时运行的函数。
额外的参数：
data - 包含来自请求的结果数据
status - 包含请求的状态（“success”、“notmodified”、“error”、“timeout”、“parsererror”）
xhr - 包含 XMLHttpRequest 对象
dataType 可选。规定预期的服务器响应的数据类型。
默认地，jQuery 会智能判断。
可能的类型：
“xml” - 一个 XML 文档
“html” - HTML 作为纯文本
“text” - 纯文本字符串
“script” - 以 JavaScript 运行响应，并以纯文本返回
“json” - 以 JSON 运行响应，并以 JavaScript 对象返回
“jsonp” - 使用 JSONP 加载一个 JSON 块，将添加一个 “?callback=?” 到 URL 来规定回调

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js"></script>
		<script>
			$(function(){
				$("#but1").click(function(){
				    $.post("http://127.0.0.1:8080/ajaxdemo/studentstuidstuname",
					     {stuid:'1001',stuname:'zhangsan'},
					     function(resp,status,xhr){
							 $("#main").empty();
							 $(resp).each(function(index,element){
							 	var row="<tr><td>"+element.stuid+
							 	"</td><td>"+element.stuname+
							 	"</td><td>"+element.stuage+
							 	"</td><td>"+element.stuaddress+"</td></tr>";
							 	$("#main").append(row);
							 });
						 },"json");
				});
			});
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="测试post()"/>
		<table id="main" border="1px" width="500px"></table>
	</body>
</html>

敬礼 salute

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery4

jQuery - AJAX 简介1.AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。语法:$(selector).load(url,data,function(response,status,xhr))load()从服务器加载数据，并把返回的数据放置到指定的元素中url必需。规定您需要加载的 URL。data可选。规定连同请求发送到服务器的数据function(response,status,xhr)可选。规定 load(
复制链接

扫一扫