jQuery4

最新推荐文章于 2024-02-13 08:00:47 发布

270年前

最新推荐文章于 2024-02-13 08:00:47 发布

阅读量53

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_49344258/article/details/108668276

版权

jQuery--AJAX简介

1.ajax是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。

load()

从服务器加载数据，并把返回的数据放置到指定的元素中

语法

$(selector).load(url,data,fuction(response,status,xhr))

url

必需，规定需要加载的url。

data

可选，规定连同请求发送到服务器。

function(reponse,status,xhr)

可选。规定load() 方法完成时运行的回调函数

额外的参数：

response 包含来自请求的结果数据

status 包含请求的状态

("success","notmodified","error","timeout","parsererror")

xhr 包含XMLHttpRequest对象


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="E:\网星学习\2020.09.17\jquery-3.5.1.js"></script>
		<script type="text/javascript" src="ajax2.js"></script>
	</head>
	<body>
		<input id="but1" type="button" value="测试load" />
		<div></div>
	</body>
</html>

$(function(){
	$("#but1").click(function(){
		//alert("sssssssssssssss");
		$("div").load("http://127.0.0.1:8080/ajaxdmeo/studentall",
		function(resp,status,xhr){
			if(status=="cuccess"){
				$("div").html("<table border='1px' width='500px'></table>");
				var jsonobj=eval("("+resp+")");
				$(jsonobj).each(function(index,element){
					var tdstring="<td>"+element.stuid+
								"</rd><td>"+element.stuname+
								"</td><td>"+element.stuage+
								"</td><td>"+element.stuaddess+
								"</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');
										}
									}
								}*/
				});
			};
		});
	});
});

$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="E:\网星学习\2020.09.17\jquery-3.5.1.js"></script>
		<script>
			$(function(){
				$("#but1").click(function(){
					//jquery的ajax方法的get方式
					$.ajax({
						url:"http://127.0.0.1:8080/ajaxdmeo/studentstuidstuname?stuid=1001&stuname=zhangsan",
						async:"GET",
						success:function(resp,status,xhr){
							$("#main").empty();
							
							/*for(var i=0;i<resp.length;i++){
								rows="<tr><td>"+resp[i].stuid+
								"</rd><td>"+resp[i].stuname+
								"</td><td>"+resp[i].stuage+
								"</td><td>"+resp[i].stuaddess+
								"</td></tr>";
							$("#main").append(rows);
							}
							*/
						    $(resp).each(function(index,element){
								rows="<tr><td>"+element.stuid+
								"</rd><td>"+element.stuname+
								"</td><td>"+element.stuage+
								"</td><td>"+element.stuaddess+
								"</td></tr>";
							  $("#main").append(rows);	
							})
						},
						dataType:"json"
					});
				});
				$("#but2").click(function(){
					//jquery的ajax方法的post方式1
					//发往服务器的数据跟谁在url后面【查询字符串参数】
					/*$.ajax({
						url:"http://127.0.0.1:8080/ajaxdmeo/studentstuidstuname?stuid=1001&stuname=zhangsan",
						async:true,
						type:"POST",
						success:function(resp,status,xhr){
							$("#main").empty();
							$(resp).each(function(index,elemnt){
								rows="<tr><td>"+element.stuid+
								"</rd><td>"+element.stuname+
								"</td><td>"+element.stuage+
								"</td><td>"+element.stuaddess+
								"</td></tr>";
								$("#main").append(rows);
							});
						},
						dataType:"json"
					});*/
					//jquery的ajax方法post方式2
					//发往服务器的数据封装到http协议中【form表单提交数据】
					$.ajax({
						url:"http://127.0.0.1:8080/ajaxdmeo/studentstuidstuname",
						async:true,
						type:"POST",
						data:{stuid:'1001',stuname:'zhansan'},
						success:function(resp,status,xhr){
							$("#main").empty();
							$(resp).each(function(index,element){
								rows="<tr><td>"+element.stuid+
								"</rd><td>"+element.stuname+
								"</td><td>"+element.stuage+
								"</td><td>"+element.stuaddess+
								"</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>

$get()

使用AJAX的HTTP GET请求从服务器加载数据

语法

$.get(url,data,function(data,satus,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="E:\网星学习\2020.09.17\jquery-3.5.1.js"></script>
		<script type="text/javascript" src="ajax.js"></script>
	</head>
	<body>
		<input id="but1" type="button" value="测试get()" />
		<table id="main" border="1px" width="500px"></table>
	</body>
</html>

$(function(){
	$("#but1").click(function(){
		$.get("http://127.0.0.1:8080/ajaxdmeo/studentstuidstuname?stuid=1001&stuname=zhangsan",function(resp,status,xhr){
			$("#main").empty();
			$(resp).each(function(index,element){
				var row="<tr><td>"+element.stuid+
								"</rd><td>"+element.stuname+
								"</td><td>"+element.stuage+
								"</td><td>"+element.stuaddess+
								"</td></tr>";
								$("#main").append(row);
			});
		},"json");
	});
});

$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来规定回

$(function(){
	$("#but1").click(function(){
		$.get("http://127.0.0.1:8080/ajaxdmeo/studentstuidstuname?stuid=1001&stuname=zhangsan",function(resp,status,xhr){
			$("#main").empty();
			$(resp).each(function(index,element){
				var row="<tr><td>"+element.stuid+
								"</rd><td>"+element.stuname+
								"</td><td>"+element.stuage+
								"</td><td>"+element.stuaddess+
								"</td></tr>";
								$("#main").append(row);
			});
		},"json");
	});
});

$(function(){
	$("#but1").click(function(){
		$.post("http://127.0.0.1:8080/ajaxdmeo/studentstuidstuname",
		{stuid:'1001',stuname:'zhangsan'},
		function(resp,status,xhr){
			$("#main").empty();
			$(resp).each(function(index,element){
				var row="<tr><td>"+element.stuid+
								"</rd><td>"+element.stuname+
								"</td><td>"+element.stuage+
								"</td><td>"+element.stuaddess+
								"</td></tr>";
								$("#main").append(row);
			});
		},"json");
	});
});

270年前

关注

0
点赞
踩
0

收藏

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

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

扫一扫