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

});

相关文章