jQuery慢慢啃之ajax(九)
1.jQuery.ajax(url,[settings])//通过 HTTP 请求加载远程数据
如果要处理$.ajax()得到的数据,则需要使用回调函数。beforeSend、error、dataFilter、success、complete。
- beforeSend 在发送请求之前调用,并且传入一个XMLHttpRequest作为参数。
- error 在请求出错时调用。传入XMLHttpRequest对象,描述错误类型的字符串以及一个异常对象(如果有的话)
- dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据(可能是处理过的)传递给success回调函数。
- success 当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。
- complete 当请求完成之后调用这个函数,无论成功或失败。传入XMLHttpRequest对象,以及一个包含成功或错误代码的字符串。
通过dataType选项还可以指定其他不同数据处理方式。除了单纯的XML,还可以指定 html、json、jsonp、script或者text。
其中,text和xml类型返回的数据不会经过处理。数据仅仅简单的将XMLHttpRequest的responseText或responseHTML属性传递给success回调函数,
如果指定为html类型,任何内嵌的JavaScript都会在HTML作为一个字符串返回之前执行。类似的,指定script类型的话,也会先执行服务器端生成JavaScript,然后再把脚本作为一个文本数据返回。
2.load(url, [data], [callback])//载入远程 HTML 文件代码并插入至 DOM 中。
$("#links").load("/Main_Page #p-Getting-Started li");//加载文章侧边栏导航部分至一个无序列表。根据返回的页面的内容用筛选器筛选一部分需要的元素。
$("#feeds").load("feeds.html");/
加载 feeds.html 文件内容。因为没有传递参数,所以默认为get方式$("#feeds").load("feeds.php", {limit: 25}, function(){ alert("The last 25 entries in the feed have been loaded"); });//和前面那个一样只是带有参数,所以用post方式传递
3.jQuery.get(url, [data], [callback], [type])//通过远程 HTTP GET 请求载入信息
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式,xml, html, script, json, text, _default。
$.get("test.php");//请求 test.php 网页,忽略返回值。
$.get("test.php", { name: "John", time: "2pm" } );//
请求 test.php 网页,传送2个参数,忽略返回值。
$.get("test.php", function(data){ alert("Data Loaded: " + data);});//
显示 test.php 返回值(HTML 或 XML,取决于返回值)。
$.get("test.cgi", { name: "John", time: "2pm" }, function(data){ alert("Data Loaded: " + data);});//
显示 test.cgi 返回值(HTML 或 XML,取决于返回值),添加一组请求参数。
4.jQuery.getJSON(url, [data], [callback])//通过 HTTP GET 请求载入 JSON 数据。
//从 Flickr JSONP API 载入 4 张最新的关于猫的图片。
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});
$.getJSON("test.js", function(json){ alert("JSON Data: " + json.users[3].name);});
$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){alert("JSON Data: " + json.users[3].name);});//带参数的调用
5.jQuery.getScript(url, [callback])//通过 HTTP GET 请求载入并执行一个 JavaScript 文件
<button id="go">» Run</button>
<div class="block"></div>
jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function(){
$("#go").click(function(){
$(".block").animate( { backgroundColor: ‘pink‘ }, 1000).animate( { backgroundColor: ‘blue‘ }, 1000);
});
});
$.getScript("test.js");//
加载并执行 test.js。
$.getScript("test.js", function(){ alert("Script loaded and executed.");});//加载并执行 test.js ,成功后显示信息。
6.jQuery.post(url, [data], [callback], [type])//通过远程 HTTP POST 请求载入信息。
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式,xml, html, script, json, text, _default。
$.post("test.php");//
请求 test.php 网页,忽略返回值:
$.post("test.php", { name: "John", time: "2pm" } );//
请求 test.php 页面,并一起发送一些额外的数据(同时仍然忽略返回值):
$.post("test.php", { ‘choices[]‘: ["Jon", "Susan"] });//
向服务器传递数据数组(同时仍然忽略返回值):
$.post("test.php", $("#testform").serialize());//使用 ajax 请求发送表单数据
$.post("test.php", function(data){ alert("Data Loaded: " + data); });//输出来自请求页面 test.php 的结果(HTML 或 XML,取决于所返回的内容)
$.post("test.php", { name: "John", time: "2pm" },function(data){alert("Data Loaded: " + data);});//
向页面 test.php 发送数据,并输出结果(HTML 或 XML,取决于所返回的内容)
$.post("test.php",{ name:"John",time:"2pm"},function(data){process(data);},"xml");//获得 test.php页面的内容,并存储为XMLHttpResponse 对象,并通过process() 这个js函数进行处理
$.post("test.php", { "func": "getNameAndTime" },function(data){alert(data.name);console.log(data.time);}, "json");//获得 test.php 页面返回的 json 格式的内容
7.ajaxComplete(callback)//AJAX 请求完成时执行函数。Ajax 事件。
$("#msg").ajaxComplete(function(event,request, settings){ $(this).append("<li>请求完成.</li>");});//AJAX 请求完成时执行函数。
$("#txt").ajaxStart(function(){ $("#wait").css("display","block");});
当 AJAX 请求正在进行时显示“正在加载”的指示
$("#txt").ajaxComplete(function(){$("#wait").css("display","none");});
ajaxError(callback)//AJAX 请求发生错误时执行函数
8.
function (event, XMLHttpRequest, ajaxOptions, thrownError) {
// thrownError 只有当异常发生时才会被传递 this; // 监听的 dom 元素 }
$("#msg").ajaxError(function(event,request, settings){
$(this).append("<li>出错页面:" + settings.url + "</li>");
});
ajaxSend(callback)//AJAX 请求发送前执行函数。
9.
$("#msg").ajaxSend(function(evt, request, settings){ $(this).append("<li>开始请求: " + settings.url + "</li>");});//
AJAX 请求发送前显示信息。
10.ajaxStart(callback)//AJAX 请求开始时执行函数。Ajax 事件。
$("#loading").ajaxStart(function(){ $(this).show();});//
AJAX 请求开始时显示信息。
11.ajaxStop(callback)//AJAX 请求结束时执行函数。
$("#loading").ajaxStop(function(){ $(this).hide();});
12.ajaxSuccess(callback)//AJAX 请求成功时执行函数。
$("#msg").ajaxSuccess(function(evt, request, settings){ $(this).append("<li>请求成功!</li>"); });
13.jQuery.ajaxPrefilter( [dataTypes] , handler(options, originalOptions, jqXHR) )
14.jQuery.ajaxSetup([options])//设置全局 AJAX 默认选项。
//设置 AJAX 请求默认地址为 "/xmlhttp/",禁止触发全局 AJAX 事件,用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。
$.ajaxSetup({ url: "/xmlhttp/", global: false, type: "POST"});
$.ajax({ data: myData });
15.serialize()//序列表表格内容为字符串
<p id="results"><b>Results: </b> </p>
<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" name="check" value="check1"/> check1
<input type="checkbox" name="check" value="check2" checked="checked"/> check2
<input type="radio" name="radio" value="radio1" checked="checked"/> radio1
<input type="radio" name="radio" value="radio2"/> radio2
</form>
$("#results").append( "<tt>" + $("form").serialize() + "</tt>" );
16.serializeArray()//序列化表格元素 (类似 ‘.serialize()‘ 方法) 返回 JSON 数据结构数据
‘‘‘注意‘‘‘,此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。
返回的JSON对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对——name参数和value参数(如果value不为空的话)。举例来说:
[
{name: ‘firstname‘, value: ‘Hello‘},
{name: ‘lastname‘, value: ‘World‘},
{name: ‘alias‘}, // this one was empty
]
取得表单内容并插入到网页中。
<p id="results"><b>Results:</b> </p>
<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" name="check" value="check1"/> check1
<input type="checkbox" name="check" value="check2" checked="checked"/> check2
<input type="radio" name="radio" value="radio1" checked="checked"/> radio1
<input type="radio" name="radio" value="radio2"/> radio2
</form>
var fields = $("select, :radio").serializeArray();
jQuery.each( fields, function(i, field){
$("#results").append(field.value + " ");
});
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。