jQuery慢慢啃之ajax(九)

时间:2021-06-25 03:35:46

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");});


8.
ajaxError(callback)//AJAX 请求发生错误时执行函数

function (event, XMLHttpRequest, ajaxOptions, thrownError) {
// thrownError 只有当异常发生时才会被传递
this; // 监听的 dom 元素
}
$("#msg").ajaxError(function(event,request, settings){
$(this).append("<li>出错页面:" + settings.url + "</li>");
});


9.
ajaxSend(callback)//AJAX 请求发送前执行函数。

 $("#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 + " ");
});