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

Jquery重新学习之九[Ajax运用总结C]

2014-02-16 14:07 465 查看

前两篇文章主要介绍Jquery如何利用Ajax进行操作数据，主要介绍调用的方法；其中Jquery.ajax()是Jquery中最底层的方法；Jquery还定义的一个方法跟几个事件为Jquery.ajax ()进行简化跟扩展；

1：其中全局方法jQuery.ajaxSetup([options])则是为了在使用$.ajax(),有时一个页面需要调用多个$.ajax()方法，如果每个方法都设置其中的请求细节，将是一件十分麻烦的事。可以一次设置，全局有效，这样大大简化了$.ajax()方法中细节的编写；

实例代码（只需要设置一个$.ajaxSetup(),其它几个地方调用就不用再编写相同的代码）：

<head>
<title>$.ajaxSetup()方法全局设置Ajax</title>
<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js">
</script>
<script type="text/javascript">
$(function() {
$.ajaxSetup({ //设置全局性的Ajax选项
type: "GET",
url: "UserInfo.xml",
dataType: "xml"
})
$("#Button1").click(function() { //"姓名”按钮的单击事件
$.ajax({
success: function(data) { //传回请求响应的数据
ShowData(data, "姓名", "name"); //显示"姓名"部分
}
})
})
$("#Button2").click(function() { //"性别”按钮的单击事件
$.ajax({
success: function(data) { //传回请求响应的数据
ShowData(data, "性别", "sex"); //显示"性别"部分
}
})
})

$("#Button3").click(function() { //"邮箱”按钮的单击事件
$.ajax({
success: function(data) { //传回请求响应的数据
ShowData(data, "邮箱", "email"); //显示"邮箱"部分
}
})
})
/*
*根据名称与值，获取请求响应数据中的某部分
*@Param d为请求响应后的数据
*@Param n为数据中文说明字符
*@Param d为数据在响应数据中的元素名称
*/
function ShowData(d, n, v) {
$("#divTip").empty(); //先清空标记中的内容
var strHTML = ""; //初始化保存内容变量
$(d).find("User").each(function() { //遍历获取的数据
var $strUser = $(this);
strHTML += n + "：" + $strUser.find(v).text() + "<hr>";
})
$("#divTip").html(strHTML); //显示处理后的数据
}
})
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
<span><input id="Button1" type="button" value="姓名" class="btn" /></span>
<span><input id="Button2" type="button" value="性别" class="btn" /></span>
<span><input id="Button3" type="button" value="邮箱" class="btn" /></span>
</div>
<div class="divContent">
<div id="divTip" class="clsShow"></div>
</div>
</div>
</body>
</html>

2：在Jquery中，除了全局性的函数外，还有6个全局性的Ajax事件，由于在使用$.ajax()方法时，其中的选项参数global的值默认情况下为true,这也意味着所有在执行的Ajax的数据请求，都绑定了全局事件；也就是说6个全局性的开关是global属性决定；

2.1 ajaxStart(callback)和ajaxStop(callback)这两个使用的频率非常高，前者是当请求开始执行时触发，往往用于编写一些准备性的工作，后者是当请求结束时触发；

实例代码：

<head>
<title>Ajax中的全局事件</title>
<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js">
</script>
<script type="text/javascript">
$(function() {

//元素绑定全局ajaxStart事件
$("#divMsg").ajaxStart(function() {
$(this).show(); //显示元素
})

//元素绑定全局ajaxStop事件
$("#divMsg").ajaxStop(function() {
$(this).html("已成功获取数据。").hide();
})

$("#Button1").click(function() {
$.ajax({ //带参数请求服务器
type: "GET",
url: "GetData.aspx",
//获取加码后的数据并作为参数传给服务器
data: { txtData: encodeURI($("#txtData").val()) },
dataType: "html",
success: function(data) { //显示解码后的返回数据
$("#divTip").html(decodeURI(data));
}
})
})
})
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
<span>数据：<input id="txtData" type="text" class="txt" /></span>
<span><input id="Button1" type="button" value="发送" class="btn" /></span>
</div>
<div class="divContent">
<div id="divMsg" class="clsTip">正在发送数据请求…</div>
<div id="divTip" class="clsShow"></div>
</div>
</div>
</body>
</html>

其中GetData.aspx代码：

string strName = Request["txtData"]; //返回传回的参数
Response.Write(strName); //返回传回的参数

感谢您的阅读，坚持每天进步一点点，离成功就更新一步；希望文章对您有所帮助；

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

标签：

相关文章推荐

新的分享

章节导航