亲宝软件园·资讯

展开

Jquery中使用AJAX方法

springsnow 人气:0

一、AJAX请求

1、jQuery.ajax(url,[settings])：

通过 HTTP 请求加载远程数据。

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数。

Example: 保存数据到服务器，成功时显示信息。

$.ajax({
  type: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
}).done(function( msg ) {
  alert( "Data Saved: " + msg );
});

2、ajax选项

3、回调函数

如果要处理 $.ajax() 得到的数据，则需要使用回调函数：beforeSend、error、dataFilter、success、complete。

4、GET方法和POST方法的区别

二、AJAX请求快捷方法：

1、.load( url [, data ] [, callback ] )：

从服务器载入数据并且将返回的 HTML 代码并插入至 匹配的元素中。

如果提供了 "complete" 回调函数，它将在函数处理完之后，并且 HTML 已经被插入完时被调用。

默认使用 GET 方式 ， 如果data参数提供一个对象，那么使用 POST 方式。

举例：

//1、在一个有序列表中，加载主页的页脚导航。
 $("#new-nav").load("/ #jq-footerNavigation li");
//2、显示一个信息如果Ajax请求遭遇一个错误
$("#success").load("/not-here.php", function(response, status, xhr) {
  if (status == "error") {
    var msg = "Sorry but there was an error: ";
    $("#error").html(msg + xhr.status + " " + xhr.statusText);
  }
});

//3、发送数组形式的data参数到服务器。
$("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } );

//4、将feeds.html 文件载人到 ID为feeds的DIV.
$("#feeds").load("feeds.html");

2、$.get(URL,callback)：

通过 HTTP GET 请求从服务器上请求数据。

下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：

$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

3、$.post(URL,data,callback):

通过 HTTP POST 请求从服务器上请求数据。

下面的例子使用 $.post() 连同请求一起发送数据：

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

4、$.getJSON(url,data,callback):

通过 HTTP GET 请求载入 JSON 数据。

data数据会被附加到一个查询字符串的URL中，发送到服务器。如果该值的data参数是一个普通的对象，它会转换为一个字符串并使用URL编码，然后才追加到URL中。

下面的例子从 Flickr JSONP API中加载最近的四张标签为猫的图片：

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
  {
    tags: "mount rainier",
    tagmode: "any",
    format: "json"
  },
  function(data) {
    $.each(data.items, function(i,item){
      $("<img/>").attr("src", item.media.m).appendTo("#images");
      if ( i == 3 ) return false;
    });
  });

通过test.js加载这个JSON数据，并使用返回的JSON数据中的 name值：

$.getJSON("test.js", function(json) {
   alert("JSON Data: " + json.users[3].name);
 });

5、$.getScript( url [, callback ] ):

使用一个HTTP GET请求从服务器加载并执行一个 JavaScript 文件

载入的脚本在全局环境中执行，因此能够引用其他变量，并使用 jQuery 函数。被加载的脚本同样作用于当前页面.

默认情况下，$.getScript() cache选项被设置为 false。这将在请求的URL的查询字符串中追加一个时间戳参数，以确保每次浏览器下载的脚本被重新请求。

我们动态加载新的官方jQuery 颜色动画插件，一旦该插件加载完成就会触发一些颜色动画。

(function() {
  var url = "https://raw.github.com/jquery/jquery-color/master/jquery.color.js";
  $.getScript(url, function() {
    $("#go").click(function(){
      $(".block")
        .animate( { backgroundColor: "rgb(255, 180, 180)" }, 1000 )
        .delay(500)
        .animate( { backgroundColor: "olive" }, 1000 )
    });
  });
})();

三、全局事件

Ajax会触发很多事件。 
有两种事件，一种是局部事件，一种是全局事件：

1、局部事件：

通过$.ajax来调用并且分配。

$.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ...
});

2、全局事件：

可以用bind来绑定，用unbind来取消绑定。

这个跟click/mousedown/keyup等事件类似。但他可以传递到每一个DOM元素上。

$("#loading").bind("ajaxSend", function(){ //使用bind
    $(this).show();
}).ajaxComplete(function(){ //直接使用ajaxComplete
    $(this).hide();
});

当然，你某一个Ajax请求不希望产生全局的事件，则可以设置global:false

$.ajax({
url: "test.html",
global: false,
// ...
});

全局事件中，除了ajaxStart和ajaxStop之外，其他的事件都有3个参数：event, XMLHttpRequest, ajaxOptions。

3、事件顺序

事件发生的顺序如下：

举例：

//当 AJAX 请求开始时，显示“加载中”的指示：
$("div").ajaxStart(function(){
  $(this).html("<img src='demo_wait.gif' />");
});

//AJAX 请求结束后隐藏信息：
$("#loading").ajaxStop(function(){
  $(this).hide();
});

四、$.ajaxSetup( options ) :

设置全局 AJAX 默认选项。

举例：设置 AJAX 请求默认地址为 "/xmlhttp/"，禁止触发全局 AJAX 事件，用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数

$.ajaxSetup({
  url: "/xmlhttp/",
  global: false,
  type: "POST"
});
$.ajax({ data: myData });

五、.serialize() 与 .serializeArray():

序列化表单内容

如果要表单元素的值包含到序列字符串中，元素不能被禁用,元素必须使用 name 属性。

1、.serialize() :

序列化表单内容为字符串。

.serialize() 方法可以操作已选取个别表单元素的 jQuery 对象，比如 <input>, <textarea> 以及 <select>。不过，选择 <form> 标签本身进行序列化一般更容易些：

$('form').submit(function() {
  alert($(this).serialize());
  return false;
});

输出标准的查询字符串：

a=1&b=2&c=3&d=4&e=5

2、.serializeArray() :

序列化表单内容为JSON数组。

serializeArray()输出标准的查询JOSN对象：

[ { name: a value: 1 }, { name: b value: 2 }, { name: c value: 3 }, { name: d value: 4 }, { name: e value: 5 } ]

六、利用Jquery获取后台代码或Webservice

注意：1.方法一定要静态方法，而且要有[WebMethod]的声明

后台<C#>:

using System.Web.Script.Services;  
 
[WebMethod]  
public static string SayHello()  
{  
     return "Hello Ajax!";  
}

前台<JQuery>:

$(function()
 {   
    $("#btnOK").click(function()
 {   
        $.ajax({  
            //要用post方式  
            type:"Post",  
            //方法所在页面和方法名  
            url:location.pathname+"/SayHello",  
            contentType:"application/json; charset=utf-8",  
            dataType:"json",  
            success:function(data)
             {   
                alert(data.d);  //返回的数据用data.d获取内容  
            },  
            error:function(err)
             {   
                alert(err);  
            }  
        });  
 
        //禁用按钮的提交  
        return false;  
    });  
});

注意：如果方法需要传参数如：GetStr(string str,string str2)，则$.ajax需要增加data: "{'str':'我是','str2':'XXX'}"。

七、通过Ajax读取XML数据

//1、解析XML字符串：
var xmlDoc=$.parseXML(“”);

//2、封装XMLDOC：
var $xml=$(xmlDoc) 

//3、判断是否是XMLDOC：
$.isXMLDoc(xmlDoc)==true

//4、查询XML，和查询HTML语法一致：
$.xml.find(“title”).text;$(“title”,$xml).text();

通过Ajax读取XML数据：

$.ajax({
     type: "POST",
     url: "WebService1.asmx/GetDataSet",
     data: "{}",
     dataType: 'xml', //返回的类型为XML ，和前面的Json，不一样了
     success: function (xml) {      
             $(xml).find("Table1").each(function () {
                 $(this).find("ID").text() + " " + $(this).children("title").attr("id"));
             });     
     }
 });
//如果返回的是JOSN文本，则需要使用$.parstJSON(json)或eval("(+json+)")解析

到此这篇关于Jquery使用AJAX方法请求数据的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持。

加载全部内容
相关教程
猜你喜欢
用户评论