jQuery-Ajax之get()和post()

最新推荐文章于 2022-10-25 10:36:34 发布

我叫阿狸猫

最新推荐文章于 2022-10-25 10:36:34 发布

阅读量1.1k

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/world_java/article/details/9635643

版权

Jquery 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

jQuery-Ajax之get()和post():

$.get() 方法使用 GET 方式来进行异步请求. 它的结构是:$.get(url[, data][, callback][, type]);

参数分别是：

url:String类型请求HTML页面的URL地址

data(可选)：Object类型发送到服务器的数据，数据格式为json格式 {key:value} 如果是get请求，参数会附加到请求URL中

callback(可选)：Function类型请求完成时的回调函数，只有当Response的返回状态是success时，才调用该方法

type(可选)：服务器返回内容的格式，包括xml，html，script，json，text和_default

注意：

1、$.get() 方法的回调函数只有两个参数: data 代表返回的内容, 可以是 XML 文档, JSON 文件, HTML 片段等; textstatus 代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种。

2、回调函数的返回值是XMLHttpRequest对象。

3、方法的返回值:XMLHttpRequest对象

4、由于data(发送给服务器的数据会很多,十几个表单元素要发送,这时再写json格式的数据会很长)，这时可以使用$("#form").serialize()会将form表单下的所有元素数据都传给服务器，并且自动完成对参数的URL编码。

和load()方法相比，get()和post()多一个type可选参数。回调函数load()有三个参数：data,textStatus,callback get()和post()只有两个参数：data,textStatus,而回调函数的返回值变成了callback

$("#form1").serialize()相当于{username:$("#username").val(),psw:$("#psw").val()}

练习：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.10.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
	 <!--引入jquery的js库-->
    
	</head>
	 
	<body>
		<form action="" name="form1" id="form1">
			<input type="text" name="username" id="username" value="zhang"><br>
			<input type="text" name="psw" id="psw" value="99999"><br>
	        <input type="button" id="b1" value="登陆">
		</form>
		
		<div id="one">
		</div>
		
	</body>

<script language="JavaScript">
	$(document).ready(function(){		 			
		  /*  $.post(url,data,fucntion(data,textStatus))  通过远程 HTTP GET 请求载入信息。
			  *     * 第一参数:请求的url
			  *     * 第二参数:发送到服务器的数据  格式{name1:value1,name2:value2}
			  *     * 第三参数:回调函数
			  *         * 第一参数:返回的数据
			  *         * 第二参数:textstatus 代表请求状态, 
			  *                其值可能为: succuss, error, notmodify, timeout 4 种
			  *     * 方法的返回值:XMLHttpRequest对象
			  */
			 var xmlHttpReq=$.post("get.jsp",{username:$("#username").val(),psw:$("#psw").val()},function(data,textStatus){
			 	//alert("data  "+data);
				//alert("textStatus  "+textStatus);
				$("#one").text(data);
			 });
			 
			// alert("xmlHttpReq.readyState"+xmlHttpReq.readyState);
			// alert("xmlHttpReq.status"+xmlHttpReq.status);
		}); 
			
/************************************************************************************************/			 
//			 /*  $.get(url,data,fucntion(data,textStatus))  通过远程 HTTP GET 请求载入信息。
//			  *     * 第一参数:请求的url
//			  *     * 第二参数:发送到服务器的数据  格式{name1:value1,name2:value2}
//			  *     * 第三参数:回调函数
//			  *         * 第一参数:返回的数据
//			  *         * 第二参数:textstatus 代表请求状态, 
//			  *                其值可能为: succuss, error, notmodify, timeout 4 种
//			  *     * 方法的返回值:XMLHttpRequest对象
//			  */
//			 var xmlHttpReq=$.get("get.jsp",{username:$("#username").val(),psw:$("#psw").val()},function(data,textStatus){
//			 	//alert("data  "+data);
//				//alert("textStatus  "+textStatus);
//				$("#one").text(data);
//			 });
//			 
//			// alert("xmlHttpReq.readyState"+xmlHttpReq.readyState);
//			// alert("xmlHttpReq.status"+xmlHttpReq.status);
//		}); 
/************************************************************************************************/			
</script>
</html>