首页 / JQUERY / jQuery-ajax
jQuery-ajax
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jQuery-ajax，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4163字，纯文字阅读大概需要6分钟。
内容图文
Ajax:
1、load()方法：
//无参数传递，则是get方式：
$("#resText").load("test.php" , function(){
});
//有参数传递，则是post方式
$("#resText").load("test.php" , {name:"rain" , age:"22"},function(){
});
Eg：
$(function(){
$("#send").click(function(){
$("#resText").load("test.html");
});
});
当只需要test.html中的某一项的时候，只需要将url改写成load("test.html .para");
在load方法中，对于必须在加载完成后才能继续的操作，load提供了回调函数，包含3个参数，分别代表请求返回的内容，请求状态，XMLHttpRequest对象
$("#resText").load("test.html" ,
function(responseText , textStatus ,XMLHttpRequest){
})
在load方法中，无论Ajax请求是否成功，只要请求完成后就会触发回调函数
|
参数 |
类型 |
说明 |
|
url |
String |
请求HTML页面的url |
|
Data（可选） |
Object |
发送至服务器的key/value数据 |
|
Callback（可选） |
Function |
请求完成时的回调函数，无论请求是否成功 |
2、$.get()
|
参数 |
类型 |
说明 |
|
url |
String |
请求HTML页面的url |
|
Data（可选） |
Object |
发送至服务器的key/value数据 |
|
Callback（可选） |
Function |
请求完成时的回调函数，无论请求是否成功 |
|
Type |
String |
服务器返回内容的格式，包括json，xml，html，script，text，_default |
$.get()的回调函数有2个参数
function(data , textStatus){
//data: 返回的内容
//textStatus: 请求状态：success，error，notmodified，timeout
}
只有在数据成功返回success后才能被调用回调函数
3、$.get()的返回数据格式：
HTML片段：
function(data , textStatus){
$("#resText").html(data); //返回的内容添加到页面上
}
Xml文档：
function(data , textStatus){
var username = $(data).find("comment").attr("username");
var content = $(data).find("comment content").text();
var textHtml = "<div class="comment"><h6>"
+ username + ":</h6><p class="para">"
+ content + "</p></div>"
$("#resText").html(data); //返回的内容添加到页面上
}
Json：
function(data , textStatus){
var username = data.username;
var content = data.content;
var textHtml = "<div class="comment"><h6>"
+ username + ":</h6><p class="para">"
+ content + "</p></div>"
$("#resText").html(data); //返回的内容添加到页面上
}在后面添加第四个参数，"json"
4、jQuery提供了一个$.getScript()方法直接加载js文件
$(function(){
//在加载js文件后直接执行回调函数
$.getScript(‘test.html‘ , function(){
$("#go").click(function(){
$(".block").animate({backgroundColor : ‘pink‘},1000)
})
})
})
5、$.getJSON()方法用来加载JSON文件
$(function(){
$(‘send‘).click(function(){
$.getJSON("test.json");
})
})
//单击加载后是在网页上看不到任何效果的，需要一个回调函数，处理返回的数据
$(function(){
$(‘send‘).click(function(){
$.getJSON("test.json" ， function(data){
//data 返回的数据
});
})
})
6、jQuery提供一个通用的遍历方法：$.each(),用于遍历数组以及对象
7、$.each()函数不同于jQuery对象的each（）方法，它是一个全局变量，不操作jQuery对象，而是以一个数值或者对象i第一个参数，以一个回调函数作为第二个参数，回调函数拥有两个参数，第一个为对象成员或者数组的索引，第二个为对应的变量或者内容
$.each()函数中，要退出each循环只要false即可
$(function(){
$(‘send‘).click(function(){
$.getJSON("test.json" ， function(data){
$(‘#resText‘).empty();
var html = " ";
$.each(data , function(commentIndex , comment){
html += ‘<div class="comment"><h6>‘
+ comment[‘username‘] + ‘:</h6><p class="para">‘
+ comment[‘content‘] + ‘</p></div>‘
});
$(‘#resText‘).html(html);
});
})
})
8、$.ajax()方法是jQuery最底层的方法，上述的所有方法都可以使用该方法代替
代替$.getSON()方法：
$(function(){
$(‘#send‘).click(function(){
$.ajax({
type : "GET"，
url ： "test.json",
dataType ： "json",
success : function(data){
$(‘#resText‘).empty();
var html = " ";
$.each(data , function(commentIndex , comment){
html += ‘<div class="comment"><h6>‘
+ comment[‘username‘] + ‘:</h6><p class="para">‘
+ comment[‘content‘] + ‘</p></div>‘
});
$(‘#resText‘).html(html);
}
})
})
})
9、序列化元素：serialize（）方法，作用于一个jQuery对象，将DOM内容序列化为字符串
<form id="form1" action="#">
</form>
//使用$.get()
$("#send").click(function(){
$.get("get1.php" , {
username : $("#username").val(),
content : $("#content").val()
} , function(data ,textStatus){
$("#resText").html(data);
})
})
//序列化
$("#send").click(function(){
$.get("get1.php" , $("#form1").serialize() , function(){
$("#resText").html(data);
})
})
当复选框以及单选框序列化为字符串的时候，只会对选中的值序列化
10、serializeArray（），不是返回字符串，而是将DOM元素序列化后，返回JSON格式的数据，也就是一个对象，可以使用each函数迭代输出
11、$.param()方法：是serialize（）函数的核心，用来对一个数值或者对象按照key/value进行序列化
Eg：将一个普通的对象序列化
var obj={a:1,b:2,c:3};
var k=$.param(obj);
alert(k);//输出a=1&b=2&c=3
12、想某个Ajax请求不受全局方法的影响，可以在$.ajax（）方法中，将参数global设置为false
Ajax全局事件：
|
方法 |
说明 |
|
ajaxStart(callback) |
Ajax请求开始时执行的函数 |
|
ajaxEnd(callback) |
Ajax请求结束时执行的函数 |
|
ajaxComplete(callback) |
Ajax请求完成时执行的函数 |
|
ajaxError(callback) |
Ajax请求发生错误时 |
|
ajaxSend(callback) |
Ajax请求发送时 |
|
ajaxSuccess(callback) |
Ajax请求成功时 |
原文：http://www.cnblogs.com/zhanghuiyun/p/5185606.html
内容总结
以上是互联网集市为您收集整理的jQuery-ajax全部内容，希望文章能够帮你解决jQuery-ajax所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。