jQuery 与 Ajax
2024-05-18 00:51:58
一 ajax 是什么？
AJAX (Ansnchronous javascript and XML) 异步 JavaScript 和 XML。是一种用于创建快速动
态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着
可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果
需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、
开心网等等。
二 ajax 用在哪里？
简单说是需要连接数据库的地方，但是连接数据库传输的信息量很少，用不着刷新整个页面，这
种类型的适合用 ajax，避免了属性整个页面带来的资源浪费。
三 为什么要使用 ajax？
减轻服务器的负担，按需取数，可以最大程度的减少冗余请求和响应对服务造成的负担。无需
更新页面，减少用户心理和实际的等待时间。带来更好的用户体验。可以把以前一些服务器负担的工
作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和速写的负担，节约空间和宽带租用成
本。可以调用外部数据。基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。进一步促
进页面呈现和数据的分离。
优势:
1. 不需要插件支持
2. 优秀的用户体验 (无刷新更新网页)
3. 提高 web 程序的性能(即时提交)
4. 减轻服务器与带宽的负担
缺点:
1. 浏览器对 XMLHttpRequest 的支持不足
2. 破坏浏览器的前进后退按钮的正常功能
3. 对搜索引擎的支持不足(百度爬虫)
4. 开发和调试工具的缺乏
安装服务器环境
下载 AppServ(php 网站架构工具组合包)
http://www.appservnetwork.com
安装好后服务器的默认文件夹是 AppServ\www，
将包含程序相关文件夹 copy 至本目录 在地址栏输入 http://localHost/相关文件夹/相关文件
Js 与 Ajax
<script language="javascript" type="text/javascript">
//通过这个函数来异步获取信息
function Ajax(){
var xmlHttpReq = null; //声明一个空对象用来装入XMLHttpRequest
if (window.ActiveXObject){
//IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest){
//除IE5 IE6 以外的浏览器XMLHttpRequest是window的子对象
xmlHttpReq = new XMLHttpRequest();//实例化一个XMLHttpRequest
}
if(xmlHttpReq != null){ //如果对象实例化成功
xmlHttpReq.open("GET","test.php",true); //调用open()方法并采用异步方式
xmlHttpReq.onreadystatechange=RequestCallBack; //设置回调函数
xmlHttpReq.send(null); //因为使用get方式提交，所以可以使用null参数调用
}
function RequestCallBack(){//一旦readyState值改变，将会调用这个函数
if(xmlHttpReq.readyState == 4){//完成加载
if(xmlHttpReq.status == 200){//响应成功
//将xmlHttpReq.responseText的值赋给ID为 resText 的元素
document.getElementById("resText").innerHTML =
xmlHttpReq.responseText;
}
}
}
}
</script>
<input type="button" value="Ajax 提交" οnclick="Ajax();" />
<div id="resText" ></div>
Test.php :
<?php
echo "Hello Ajax!";
?>
一 ajax 是什么？
AJAX (Ansnchronous javascript and XML) 异步 JavaScript 和 XML。是一种用于创建快速动
态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着
可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果
需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、
开心网等等。
二 ajax 用在哪里？
简单说是需要连接数据库的地方，但是连接数据库传输的信息量很少，用不着刷新整个页面，这
种类型的适合用 ajax，避免了属性整个页面带来的资源浪费。
三 为什么要使用 ajax？
减轻服务器的负担，按需取数，可以最大程度的减少冗余请求和响应对服务造成的负担。无需
更新页面，减少用户心理和实际的等待时间。带来更好的用户体验。可以把以前一些服务器负担的工
作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和速写的负担，节约空间和宽带租用成
本。可以调用外部数据。基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。进一步促
进页面呈现和数据的分离。
优势:
1. 不需要插件支持
2. 优秀的用户体验 (无刷新更新网页)
3. 提高 web 程序的性能(即时提交)
4. 减轻服务器与带宽的负担
缺点:
1. 浏览器对 XMLHttpRequest 的支持不足
2. 破坏浏览器的前进后退按钮的正常功能
3. 对搜索引擎的支持不足(百度爬虫)
4. 开发和调试工具的缺乏
安装服务器环境
下载 AppServ(php 网站架构工具组合包)
http://www.appservnetwork.com安装好后服务器的默认文件夹是 AppServ\www，将包含程序相关文件夹 copy 至本目录
在地址栏输入 http://localHost/相关文件夹/相关文件
Js 与 Ajax
<script language="javascript" type="text/javascript">
//通过这个函数来异步获取信息
function Ajax(){
var xmlHttpReq = null; //声明一个空对象用来装入XMLHttpRequest
if (window.ActiveXObject){
//IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest){
//除IE5 IE6 以外的浏览器XMLHttpRequest是window的子对象
xmlHttpReq = new XMLHttpRequest();//实例化一个XMLHttpRequest
}
if(xmlHttpReq != null){ //如果对象实例化成功
xmlHttpReq.open("GET","test.php",true); //调用open()方法并采用异步方式
xmlHttpReq.onreadystatechange=RequestCallBack; //设置回调函数
xmlHttpReq.send(null); //因为使用get方式提交，所以可以使用null参数调用
}
function RequestCallBack(){//一旦readyState值改变，将会调用这个函数
if(xmlHttpReq.readyState == 4){//完成加载
if(xmlHttpReq.status == 200){//响应成功
//将xmlHttpReq.responseText的值赋给ID为 resText 的元素
document.getElementById("resText").innerHTML =
xmlHttpReq.responseText;
}
}
}
}
</script>
<input type="button" value="Ajax 提交" οnclick="Ajax();" />
<div id="resText" ></div>
Test.php :
<?php
echo "Hello Ajax!";
?>
为什么要学习 jquery Ａjax
用 js 原生的 XMLHttpRequest 对象的很多属性与方法极其庞大,学习起来效率极其低下，而 jquery
提供了一些快捷的日常操作，使 Ajax 的开发变得极其简单,这样开发人员就可以将精力集中在业务和
用户体验上，而不必理会那些繁烦的 XMLHttpRequest 的对象。jQuery 中的 Ajax
jQuery 对 Ajax 中的方法进行了封装
第一层方法 :$.ajax() 最底层
第二层方法 :$.load()、$.get()、$.post(); 使用频率最高
第三层方法 :$.getScript()和$.getJSON();
1 、Load()方法
载入远程的 html 代码并插入到相关 DOM 中
实例 2：将整个 html 页面载入
NO1.首先创建一个被 load 方法加载的页面:test.html
<div class="comment">
<h6>张三:</h6>
<p class="para">沙发.</p>
</div>
<div class="comment">
<h6>李四:</h6>
<p class="para">板凳.</p>
</div>
<div class="comment">
<h6>王五:</h6>
<p class="para">地板.</p>
</div>
NO2.创建一个空白页面，在上面追加如下元素
$(function(){
$("#send").click(function(){
$("#resText").load("test.html");
})
})
<input type="button" id="send" value="Ajax 获取" />
<div class="comment">
已有评论：
</div>
<div id="resText" ></div>
实例 3：如果只需要加载页面中的某些元素，可以通过 load 方法中的 url 参数指定选择符,可以方便的筛选出内
容
语法结构为 ”url selector”
$("#resText").load("test.html .para"); //只加载页在中 para 的内容
效果如下
传递方式
回调函数
$(function(){
$("#send").click(function(){
$("#resText").load("test.html .para",function (responseText, textStatus, XMLHttpRequest){
//responseText:请求返回的内容
//textStatus:请求状态:success、error、notmodified、timeout4 种
// XMLHttpRequest: XMLHttpRequest 对象
})
注:
在 load 方法中,只要 ajax 请求成功(complete)，回调函数就会被触发,下面对应介绍 ajax 对
应的回调函数↓
2 、$.get()方法与$.post()方法
Get 01 返回html片断
<script type="text/javascript">
$(function(){
$("#send").click(function(){
$.get("get1.php", { //数据文件
username : $("#username").val() , //data参数
content : $("#content").val()
}, function (data, textStatus){
//回调函数(data返回内容XML/JSON/HTML,textStatus请求状态
//-success/error/notmodified/timeout)
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
})
})
</script>
<form id="form1" action="#">
<p>评论:</p>
<p>姓名: <input type="text" name="username" id="username" /></p>
<p>内容: <textarea name="content" id="content" rows="2"
cols="20"></textarea></p>
<p><input type="button" id="send" value="提交"/></p>
</form>
<div class='comment'>已有评论：</div>
<div id="resText" >
</div>Get 02 返回XML文档[详见案例]
相比返回html，返回XML技术要复杂些，但XML的可移植性优点是无可比拟的……不过XML体积
庞大，解析起来要慢一些，所以现在以返回json为主
如果要返回xml，需要在php文件中声明
header("Content-Type:text/xml; charset=utf-8");
Get 03 返回json（详见案例）
优点:简洁，容易阅读，重用方便
总结：以上３种方法返回html最为简单;
如果数据需要重用，则选择json，它在性能和大小方面具有优势;
如果远程数据未知，则选择XML,它是计算网络的“万能语”
Post 01
$(function(){
$("#send").click(function(){
$.post("post1.php", {
Username:$("#username").val() ,
Content:$("#content").val()
}, function (data, textStatus){ // textStatus代表状态，成功才
返回
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
})
})
<form id="form1" action="#">
<p>评论:</p>
<p>姓名: <input type="text" name="username" id="username" /></p>
<p>内容:
<textarea name="content" id="content" rows="2" cols="20">
</textarea>
</p> <p>
<input type="button" id="send" value="提交"/>
</p>
</form>
<div class='comment'>已有评论:</div>
<div id="resText" >
</div>
如果 load 方式带有参数传递的话就会使用 post 发送请求
$("#resText").load("test.html .para",function (responseText, textStatus, XMLHttpRequest){
alert($(this).html()); // 在 这 里 this 指 向 的 是 当 前 的 DOM 对象，即
$("#iptText")[0]
alert(responseText); //请求返回的内容
alert(textStatus);
//请求状态：success，error
alert(XMLHttpRequest); //XMLHttpRequest 对象
});
})
3 $.getScript()与$.getJson()
此外还可以通过 jsonp 的形式来跨域选择外网的 json
详见实例:
前面所讲的$.load/$.get/$.post/$.getScript/$.getJSON 这些方法都是基于
$.ajax 方法创建的，$.ajax 方法是 jquery 最底层的 Ajax 实现，因此它可以替代前
面所有的方法
例如：
$.ajax 替代$.getScript()
$.ajax 替代$.getJson()
先看一段代码
$("#send").click(function(){
$.get("get1.php", { //数据文件
username : $("#username").val() , //data 参数
content : $("#content").val()
}, function (data, textStatus){
$("#resText").html(data); // 把返回的数据添加到页面上
});
})
分析：如果少量的表单元素还可以，但如果表单元素有好多，这种方式费时费力,为此 jquery 提供了
一个简化的操作――serialize()方法，使得这一问题得以解决
$("#send").click(function(){$.get("get1.php", $("#form1").serialize() , function (data, textStatus){
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
})
07 serialize() 方法
$.get("get1.php", {
user : $("#username").val() , //data 参数
cont : $("#content").val()
}, function (data, textStatus){
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
1 serialize
以上的$.get 方法逐个添加 data 的键/值对，少量的字段还可以勉强用，字段多了操作极为不便，为此
jquery 为这一常用操作添加了一个 serialize 方法，可以将ＤＯＭ元素序列化为字符串
通过序列化表单值，创建 URL 编码文本字符串。
您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
$(function(){
$("#send").click(function(){
var $data = $(":checkbox,:radio").serialize();
alert( $data );
})
结果如下:
2 serializeArray()
方法通过序列化表单值来创建对象数组（名称和值）。您可以选择一个或多个表单元素(比如 input 及/或 textarea,或者 form 元素本身。
<script type="text/javascript">
$(function(){
var fields = $(":checkbox,:radio").serializeArray();
console.log(fields); //Firebug输出
$.each( fields, function(i, field){
$("#results").append(field.value + " , ");
});
})
</script>
<p id="results"><b>结果：</b> </p>
<input type="checkbox" name="check" value="1" checked="checked"/>篮球<br/>
<input type="checkbox" name="check" value="2" checked="checked"/>足球<br/>
<input type="checkbox" name="check" value="3" checked="checked"/>乒乓球<br/>
<input type="checkbox" name="check" value="4" />羽毛球<br/>
<input type="radio" name="radio" value="1" checked="checked"/>篮球<br/>
<input type="radio" name="radio" value="2" />足球<br/>
<input type="radio" name="radio" value="3" />乒乓球<br/>
<input type="radio" name="radio" value="4" />羽毛球<br/>
3 serializeArray()
param() 方法创建数组或对象的序列化表示。
该序列化值可在进行 AJAX 请求时在 URL 查询字符串中使用。
语法:jQuery.param(object,traditional)
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
personObj=new Object();
personObj.firstname="Bill";
personObj.lastname="Gates";
personObj.age=60;
personObj.eyecolor="blue";
$("button").click(function(){
$("div").text($.param(personObj));
});
});
</script>
</head>
<body>
<button>序列化对象</button>
<div></div>
</body>
</html>
4 ajax 中的全局事件ajaxStart(callback)：Ajax 请求开始时触发该事件
ajaxSend(callback)：Ajax 请求发送前触发该事件
ajaxSuccess(callback)：Ajax 请求成功时触发该事件
ajaxComplete(callback)：Ajax 请求完成时触发该事件
ajaxStop(callback)：Ajax 请求结束时触发该事件
ajaxError(callback)：Ajax 请求出现错误时触发该事件
事件的顺序如下：
ajaxStart 全局事件
开始新的 Ajax 请求，并且此时没有其他 ajax 请求正在进行。
beforeSend 局部事件
当一个 Ajax 请求开始时触发。如果需要，你可以在这里设置 XHR 对象。
ajaxSend 全局事件
请求开始前触发的全局事件
success 局部事件
请求成功时触发。即服务器没有返回错误，返回的数据也没有错误。
ajaxSuccess 全局事件
全局的请求成功
error 局部事件
仅当发生错误时触发。你无法同时执行 success 和 error 两个回调函数。
ajaxError 全局事件
全局的发生错误时触发
complete 局部事件
不管你请求成功还是失败，即便是同步请求，你都能在请求完成时触发这个事件。
ajaxComplete 全局事件
全局的请求完成时触发
ajaxStop 全局事件
当没有 Ajax 正在进行中的时候，触发。
为什么要学习 jquery Ａjax
用 js 原生的 XMLHttpRequest 对象的很多属性与方法极其庞大,学习起来效率极其低下，而 jquery
提供了一些快捷的日常操作，使 Ajax 的开发变得极其简单,这样开发人员就可以将精力集中在业务和
用户体验上，而不必理会那些繁烦的 XMLHttpRequest 的对象。jQuery 中的 Ajax
jQuery 对 Ajax 中的方法进行了封装
第一层方法 :$.ajax() 最底层
第二层方法 :$.load()、$.get()、$.post(); 使用频率最高
第三层方法 :$.getScript()和$.getJSON();
1 、Load()方法
载入远程的 html 代码并插入到相关 DOM 中
实例 2：将整个 html 页面载入
NO1.首先创建一个被 load 方法加载的页面:test.html
<div class="comment">
<h6>张三:</h6>
<p class="para">沙发.</p>
</div>
<div class="comment">
<h6>李四:</h6>
<p class="para">板凳.</p>
</div>
<div class="comment">
<h6>王五:</h6>
<p class="para">地板.</p>
</div>
NO2.创建一个空白页面，在上面追加如下元素
$(function(){
$("#send").click(function(){
$("#resText").load("test.html");
})
})
<input type="button" id="send" value="Ajax 获取" />
<div class="comment">
已有评论：
</div>
<div id="resText" ></div>实例 3：如果只需要加载页面中的某些元素，可以通过 load 方法中的 url 参数指定选择符,可以方便的筛选出内
容
语法结构为 ”url selector”
$("#resText").load("test.html .para"); //只加载页在中 para 的内容
效果如下
传递方式
回调函数
$(function(){
$("#send").click(function(){
$("#resText").load("test.html .para",function (responseText, textStatus, XMLHttpRequest){
//responseText:请求返回的内容
//textStatus:请求状态:success、error、notmodified、timeout4 种
// XMLHttpRequest: XMLHttpRequest 对象
})
注:
在 load 方法中,只要 ajax 请求成功(complete)，回调函数就会被触发,下面对应介绍 ajax 对
应的回调函数↓2 、$.get()方法与$.post()方法
Get 01 返回html片断
<script type="text/javascript">
$(function(){
$("#send").click(function(){
$.get("get1.php", { //数据文件
username : $("#username").val() , //data参数
content : $("#content").val()
}, function (data, textStatus){
//回调函数(data返回内容XML/JSON/HTML,textStatus请求状态
//-success/error/notmodified/timeout)
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
})
})
</script>
<form id="form1" action="#">
<p>评论:</p>
<p>姓名: <input type="text" name="username" id="username" /></p>
<p>内容: <textarea name="content" id="content" rows="2"
cols="20"></textarea></p>
<p><input type="button" id="send" value="提交"/></p>
</form>
<div class='comment'>已有评论：</div>
<div id="resText" >
</div>Get 02 返回XML文档[详见案例]
相比返回html，返回XML技术要复杂些，但XML的可移植性优点是无可比拟的……不过XML体积
庞大，解析起来要慢一些，所以现在以返回json为主
如果要返回xml，需要在php文件中声明
header("Content-Type:text/xml; charset=utf-8");
Get 03 返回json（详见案例）
优点:简洁，容易阅读，重用方便
总结：以上３种方法返回html最为简单;
如果数据需要重用，则选择json，它在性能和大小方面具有优势;
如果远程数据未知，则选择XML,它是计算网络的“万能语”
Post 01
$(function(){
$("#send").click(function(){
$.post("post1.php", {
Username:$("#username").val() ,
Content:$("#content").val()
}, function (data, textStatus){ // textStatus代表状态，成功才
返回
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
})
})
<form id="form1" action="#">
<p>评论:</p>
<p>姓名: <input type="text" name="username" id="username" /></p>
<p>内容:
<textarea name="content" id="content" rows="2" cols="20">
</textarea>
</p> <p>
<input type="button" id="send" value="提交"/>
</p>
</form>
<div class='comment'>已有评论:</div>
<div id="resText" >
</div>
如果 load 方式带有参数传递的话就会使用 post 发送请求
$("#resText").load("test.html .para",function (responseText, textStatus, XMLHttpRequest){
alert($(this).html()); // 在 这 里 this 指 向 的 是 当 前 的 DOM 对象，即
$("#iptText")[0]
alert(responseText); //请求返回的内容
alert(textStatus);
//请求状态：success，error
alert(XMLHttpRequest); //XMLHttpRequest 对象
});
})
3 $.getScript()与$.getJson()
此外还可以通过 jsonp 的形式来跨域选择外网的 json
详见实例:
前面所讲的$.load/$.get/$.post/$.getScript/$.getJSON 这些方法都是基于
$.ajax 方法创建的，$.ajax 方法是 jquery 最底层的 Ajax 实现，因此它可以替代前
面所有的方法例如：
$.ajax 替代$.getScript() $.ajax 替代$.getJson()
先看一段代码
$("#send").click(function(){
$.get("get1.php", { //数据文件
username : $("#username").val() , //data 参数
content : $("#content").val()
}, function (data, textStatus){
$("#resText").html(data); // 把返回的数据添加到页面上
});
})
分析：如果少量的表单元素还可以，但如果表单元素有好多，这种方式费时费力,为此 jquery 提供了
一个简化的操作――serialize()方法，使得这一问题得以解决
$("#send").click(function(){$.get("get1.php", $("#form1").serialize() , function (data, textStatus){
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
})
07 serialize() 方法
$.get("get1.php", {
user : $("#username").val() , //data 参数
cont : $("#content").val()
}, function (data, textStatus){
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
1 serialize
以上的$.get 方法逐个添加 data 的键/值对，少量的字段还可以勉强用，字段多了操作极为不便，为此
jquery 为这一常用操作添加了一个 serialize 方法，可以将ＤＯＭ元素序列化为字符串
通过序列化表单值，创建 URL 编码文本字符串。
您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
$(function(){
$("#send").click(function(){
var $data = $(":checkbox,:radio").serialize();
alert( $data );
})
结果如下:
2 serializeArray()
方法通过序列化表单值来创建对象数组（名称和值）。您可以选择一个或多个表单元素(比如 input 及/或 textarea,或者 form 元素本身。
<script type="text/javascript">
$(function(){
var fields = $(":checkbox,:radio").serializeArray();
console.log(fields); //Firebug输出
$.each( fields, function(i, field){
$("#results").append(field.value + " , ");
});
})
</script>
<p id="results"><b>结果：</b> </p>
<input type="checkbox" name="check" value="1" checked="checked"/>篮球<br/>
<input type="checkbox" name="check" value="2" checked="checked"/>足球<br/>
<input type="checkbox" name="check" value="3" checked="checked"/>乒乓球<br/>
<input type="checkbox" name="check" value="4" />羽毛球<br/>
<input type="radio" name="radio" value="1" checked="checked"/>篮球<br/>
<input type="radio" name="radio" value="2" />足球<br/>
<input type="radio" name="radio" value="3" />乒乓球<br/>
<input type="radio" name="radio" value="4" />羽毛球<br/>
3 serializeArray()
param() 方法创建数组或对象的序列化表示。
该序列化值可在进行 AJAX 请求时在 URL 查询字符串中使用。
语法:jQuery.param(object,traditional)
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
personObj=new Object();
personObj.firstname="Bill";
personObj.lastname="Gates";
personObj.age=60;
personObj.eyecolor="blue";
$("button").click(function(){
$("div").text($.param(personObj));
});
});
</script>
</head>
<body>
<button>序列化对象</button>
<div></div>
</body>
</html>
4 ajax 中的全局事件ajaxStart(callback)：Ajax 请求开始时触发该事件
ajaxSend(callback)：Ajax 请求发送前触发该事件
ajaxSuccess(callback)：Ajax 请求成功时触发该事件
ajaxComplete(callback)：Ajax 请求完成时触发该事件
ajaxStop(callback)：Ajax 请求结束时触发该事件
ajaxError(callback)：Ajax 请求出现错误时触发该事件
事件的顺序如下：
ajaxStart 全局事件
开始新的 Ajax 请求，并且此时没有其他 ajax 请求正在进行。
beforeSend 局部事件
当一个 Ajax 请求开始时触发。如果需要，你可以在这里设置 XHR 对象。
ajaxSend 全局事件
请求开始前触发的全局事件
success 局部事件
请求成功时触发。即服务器没有返回错误，返回的数据也没有错误。
ajaxSuccess 全局事件
全局的请求成功
error 局部事件
仅当发生错误时触发。你无法同时执行 success 和 error 两个回调函数。
ajaxError 全局事件
全局的发生错误时触发
complete 局部事件
不管你请求成功还是失败，即便是同步请求，你都能在请求完成时触发这个事件。
ajaxComplete 全局事件
全局的请求完成时触发
ajaxStop 全局事件
当没有 Ajax 正在进行中的时候，触发。
jQuery 与 Ajax相关推荐
- ajax请求必须打断点才能成功,Jquery等待ajax执行完毕继续执行（断点调试正常，运行异常）...
以前写过一个程序,发现用断点调试的时候,一步步的运行,程序是可以的,但是去了断点程序就出现了问题. $(document).ready(function(){ var arra=new Array() ...
- 转: 如何实现jQuery的Ajax文件上传
[PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的. 实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用 ...
- 用 jQuery 的 AJAX 功能发现的一个错误/注意点：HTTP Error 411
今天程序中有个地方需要 Ajax 方式 POST 数据,发现在 IE 6.0 下正常,而 FireFox 2.0.0.9 下则出错. 通过 FireBug 抓取 ajax 回发后得到的页面信息如下: ...
- jquery ajax 省 城市 二级菜单 源码,利用了jquery的ajax实现二级联互动菜单
菜单资源保存在数据库中.利用了jquery的ajax实现.用到的包有:json-lib-2.2.3-jdk15.jar ezmorph-1.0.6.jar json.js jquery.js jsp页 ...
- jQuery通过ajax方法获取json数据不执行success的原因及解决方法
1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...
- 使用jQuery实现ajax几种方法
一.$.ajax()可以通过发送HTTP请求加载远程数据,是jQuery最底层Ajax实现. 语法 $.ajax({"url" : "UserServlet", ...
- jQuery的ajax使用场景讨论（c#）
一:jQuery.ajax语法基础 jQuery.ajax([options]) 概述:通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $. ...
- 为jQuery的$.ajax设置超时时间
jQuery的ajax模块封装了非常强大的功能,有时候我们在发送一个ajax请求的时候希望能有一个超时的时间,想让程序在一段时间请求不到数据时做出一些反馈.幸运的是jQuery为我们提供了这样的参数: ...
- Jquery通过Ajax方式来提交Form表单
今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是: 保存数据到服务器,成功时显示信息. jQuery 代码: $.ajax({type: "POST",url: & ...
- 从零开始学习jQuery (六) AJAX快餐【转】
一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章讲解如何使用jQuery方便快捷的实现A ...
最新文章
- SpringCloud Feign声明式服务调用
- 关于学习Python的一点学习总结（20-＞assert判断-＞while和for使用）
- 超级计算机在线解方程,量子计算机10秒可得超级计算机百年运算结果
- jQuery 序列化表单数据 serialize() serializeArray()
- centos 7配置firewall防火墙的地址伪装和端口转发实例
- SpringBoot 居然有 44 种应用启动器
- ODI中web service介绍
- arm汇编：.balignl伪指令理解
- Springboot整合ES
- Qt编程之QtScript
- #20165201 macOS中统计代码总行数
- Jenkins手动更新AWS 上面的ECS服务
- Linux多线程编程入门
- 2.5音频编辑软件2.6语音识别技术
- GStreamer和gst-omx插件
- 计算机图形学入门（十二）-阴影映射Shadow mapping（为光线追踪准备）
- python ddos攻击脚本_【分享】Python简易DDos攻击器源码
- 解决pycharm下载第三方库速度慢的问题
- Guava 操作 集合
- STM32F103 - 延迟函数 -unfinished -unfinished-unfinished