您的位置：首页 > Web前端 > JQuery

jQuery-Ajax之get()和post()

2013-07-30 23:37 281 查看

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()只有两个参数：[b]data,textStatus,而回调函数的返回值变成了callback[/b]
[b]$("#form1").serialize()相当于{username:$("#username").val(),psw:$("#psw").val()}
[/b]

练习：

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航