load(url<String>[,data<Object>] [,callback<Function>])
载入远程HTML代码并插入DOM中
从服务器上获取静态的数据文件
1.url
$("#resText").load("test.html .para");
2.data
data决定了load()方法的传递方式,如果没有data参数传递,则采用GET方式传递,反之,则会自动转换为POST。
3.回调函数
function(responseText, textStatus, XMLHttpRequest){ //responseText: 请求返回的内容 //textStatus: 请求状态:success error notmodified timeout //XMLHttpRequest: XMLHttpRequest对象 }
$.get(url<String>[,data<Object>][,callback<Function>][,type<String>])
使用GET方法来进行异步请求
$post(url<String>[,data<Object>][,callback<Function>][,type<String>])
使用POST方法来进行异步请求
1.key/value形式的data会作为QueryString附加到请求URL中
2.type为服务器返回内容的格式
3.回调函数
function(){ //data: 返回的内容:XML/JSON/HTML //textStatus: 请求状态: success error notmodified timeout }
$.getScript()
直接加载.js文件,与HTML片段一样简单方便。
$(function(){ $.getScript("jquery.color.js" ,function(){ $("#go").click(function(){ $(".block").animate({background:'pink'}, 1000) .animate({background:'blue'}, 1000); }); }); });
$.getJSON()与$.each()
加载JSON文件,解析JSON文件
$.getJSON("test.json", function(data){ //data: 返回的数据 });
用each()方法把返回的json数据遍历出来并且直接生成html内容
$(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); }); }); });
$.ajax()
jQuery最底层的ajax实现
serialize()
把数据序列化成字符串形式
$("#send").click(function(){ $.get("get.php", $("#formTest").serialize(), function(data, textStatus){ $("#resText").html(data); }); });
不仅仅是表单form能用,form下的元素都能用。
$(":checkbox, :radio").serialize();
serializeArray()
将DOM元素序列化后返回JSON格式的数据
var fields = $(":checkbox, :radio").serializeArray(); console.log(fields);
测试一下就可以看到结果,就知道怎么用啦!
$.param(obj)
serialize()的核心,用来对一个对象或者数组按照key/value进行序列化。
var obj = {a:1,b:2,c:3}; var k = $.param(obj); alert(k);
jQuery中的Ajax全局事件
我们经常要在页面加载数据的时候给用户一个反馈,告诉用户数据正在加载中,请耐心等待之类的...比如
<div id="loading">加载中...</div>
然后用CSS控制元素隐藏,当Ajax请求开始的时候,将此元素显示,用来提示用户Ajax请求正在进行。当Ajax请求结束后,将此元素隐藏。
$("#loading").ajaxStart(function(){ $(this).show(); }); $("#loading").ajaxStop(function(){ $(this).hide(); });
除此之外还有
ajaxComplete(callback); //请求完成时执行 ajaxError(callback); //请求错误时执行 ajaxSend(callback); //发送请求前执行 ajaxSuccess(callback); //请求成功时执行
如果想在使用$.ajax()时使Ajax请求不受全局方法影响(不触发全局方法),jQuery1.5以前可以这么做
$.ajax({ url:"test.html", global:false });
1.5以后可以这么做
$.ajaxPrefilter(function(options){ options.global = true; });