前两篇文章主要介绍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); //返回传回的参数

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

最近有个妹子弄的一个关于扩大眼界跟内含的订阅号,每天都会更新一些深度内容,在这里如果你感兴趣也可以关注一下(嘿对美女跟知识感兴趣),当然可以关注后输入:github 会有我的微信号,如果有问题你也可以在那找到我;当然不感兴趣无视此信息;

Jquery重新学习之九[Ajax运用总结C]的更多相关文章

  1. jQuery源代码学习之九—jQuery事件模块

    jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 j ...

  2. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

  3. Jquery重新学习之七[Ajax运用总结A]

    Jquery中Ajax的运用是另外一个重点,平时项目经常会用它进行一些异步操作:其核心是通过XMLHttpRequest对象以一种异步的方式,向服务器发送数据请求,并通过该对象接收请求返回的数据,从而 ...

  4. 第十九篇 jQuery初步学习

    jQuery 初步学习   jQuery可以理解为是一种脚本,需要到网上下载,它是一个文件,后缀当然是js的文件,它里面封装了很多函数方法,我们直接调用即可,就比方说,我们用JS,写一个显示与隐藏,通 ...

  5. jQuery学习小结3——AJAX

    一.jQuery的Ajax方法 jQuery对Ajax 做了大量的封装,使用起来也较为方便,不需要去考虑浏览器兼容性.对于封装的方式,jQuery 采用了三层封装: 最底层的封装方法为——$.ajax ...

  6. jQuery学习笔记(Ajax)

    jQuery对Ajax操作进行了封装,在jQuery中$.ajax方法属于最底层的方法,第2层是$.load().$.get().$.post()方法,第3层是$.getScript()和$.getJ ...

  7. bootstrap-data-target触发模态弹出窗元素的data使用 data-toggle与data-target的作用 深入ASP.NET MVC之九:Ajax支持 Asp.Net MVC4系列--进阶篇之AJAX

    bootstrap-data-target触发模态弹出窗元素的data使用 时间:2017-05-27 14:22:34      阅读:4479      评论:0      收藏:0      [ ...

  8. 第26篇 jQuery 快速学习下

    前面说了下jQuery了,大部分说的都是选择器和过滤器方面的东西,这个写完后,后面就说下剩下的东西了,离目标越来越近了.下面就说说这些东西 事件 传统比较 在js中说了原生js的绑定事件,基本的形式如 ...

  9. jQuery框架学习第十一天:实战jQuery表单验证及jQuery自动完成提示插件

    jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...

随机推荐

  1. [BZOJ4028][HEOI2015]公约数数列(分块)

    先发掘性质: 1.xor和gcd均满足交换律与结合率. 2.前缀gcd最多只有O(log)个. 但并没有什么数据结构能同时利用这两个性质,结合Q=10000,考虑分块. 对每块记录这几个信息: 1.块 ...

  2. python3-开发进阶Flask的基础

    一.概述 最大的特点:短小精悍.可拓展强的一个Web框架.注意点:上下文管理机制,依赖wsgi:werkzurg 模块 二.前奏学习werkzurg 先来回顾一个知识点:一个类加括号会执行__init ...

  3. finish/onDestroy/System.exit()的区别

    Activity.finish():Call this when your activity is done and should be closed. 在你的activity动作完成的时候,或者Ac ...

  4. Zookeeper启动和集群选举

    1. QuorumPeerMain运行 1)判断是采用单实例模式还是多实例模式启动QuorumPeerMain 2)在多实例模式下,加载启动参数中指定的配置文件 3)启动QuorumPeer publ ...

  5. 【原创】Eclipse中Android项目引用

    1.选择名为SMSSDK的项目,右键--->Properties--->Android--->将Is Library勾上--->OK. 2.选中另一个名为FragmentDem ...

  6. 51nod 1040 最大公约数之和 欧拉函数

    1040 最大公约数之和 题目连接: https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1040 Description 给 ...

  7. 用Java实现HTTP Multipart的服务端和客户端

    今天简单介绍一下如何用Java支持HTTP Multipart的request和response. 整个项目的代码可以在https://github.com/mcai4gl2/multi下载. 在这个 ...

  8. 下载Ubuntn 17.04 内核源代码

    zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21-Ubuntu SMP Thu Apr 6 17:04:57 ...

  9. 一步一步实现listview加载的性能优化

    listview加载的核心是其adapter,本文针对listview加载的性能优化就是对adpter的优化,总共分四个层次: 0.最原始的加载 1.利用convertView 2.利用ViewHol ...

  10. Linux_Windows7使用VMare安装Centos6.5并使用Xshell连接Centos

      本文章主要是记录虚拟机安装Centos,并在windows使用xshell执行命令的过程,供自己和需要之人学习和使用.    难点主要在于windows和centos网络的设置,实现window连 ...