jQuery慢慢啃之ajax，九

2024-03-30 10:54•Java教程•阅读 4887

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

上一篇 »[Java面试九]脚本语言知识总结.
下一篇 »使用jquery animate实现锚点慢慢平滑滚动效果

jQuery慢慢啃之ajax，九

相关推荐

重写jquery的ajax方法

如何通过jquery实现ajax调用？

jquery的ajax重写

jQuery学习教程，九：动画

jQuery慢慢啃之CSS，六

jQuery慢慢啃之文档处理，五

jQuery Ajax返回值怎么实现？

jquery.ajax