jQuery学习大总结(五)jQueryAjax

本篇将jQuery Ajax的使用进行一个完整的总结，由于涉及到的内容相似，但方法重多，所以本篇内容会显得比较多。Ajax是提高网站应用程序的一个很好的方法，当然这使得我们可能要书写更多的代码和花费更多的时间来实现这一目的。然而，现在jQuery使得Ajax开发变得异常简单。

专注于为中小企业提供成都网站设计、成都网站制作、外贸网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业禅城免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了千余家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

我们先从最简单的方法看起，处理复杂的ajax请求时，jQuery使用jQuery.ajax()方法进行处理。在jQuery中有一些简单的方法，它对jQuery.ajax()方法进行了封装，使得我们在处理一些简单的Ajax事件时，不需要使用jQuery.ajax()方法，其中有些方法在之前的文章中已经出现过了，相信大家很快便能掌握。当然，本篇后半部分会对jQuery.ajax()方法做非常具体的说明，因为它是本篇的重中之重。

以下5个方法执行一般Ajax请求的简短形式，在处理复杂的Ajax请求时应该使用jQuery.ajax().

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

载入远程HTML文件代码并插入至DOM中，默认使用GET方式，传递参数时自动转换为POST方式。

url:要载入的远程url地址
data:发送至服务器的key/value 数据
callback:载入成功时的回调函数

示例代码如下：

 
 
 
  
  
  //无参数、无回调函数
  
  
  $("#showload").load("load.htm");
  
  
  //无回调函数
  
  
  $("#showload").load("load.htm", { "para": "para-value" });
  
  
  $("#showload").load("load.htm", { "para": "para-value" },
  
  
      function() {
  
  
          //处理
  
  
      })

Load

2.jQuery.get(url, [data], [callback])

使用get方式从服务器端获取数据。

发送请求的URL地址
要发送给服务器的数据
载入成功时回调函数

示例代码如下：

 
 
 
  
  
  $.get("jqueryget.htm", { "id": this.id },
  
  
      function(req) {
  
  
          //成功时的回调方法
  
  
          $("#showget").html(req);
  
  
      });
  
  
  })

百度logo谷歌logo

这里将显示logo

3.jQuery.post(url, [data], [callback])

使用POST方式来进行异步请求。同jQuery.get()相比，差别在于请求的方式，所以这里不做特别的说明了，使用方法同jQuery.get()相似。

4.jQuery.getScript(url,[callback])

通过 GET 方式请求载入并执行一个JavaScript文件。这个技术在前边文章中已经提到过，也是jQuery.ajax的一种简单的使用方法，可以看看ajax加载js，所以在这里也不做特别的说明了。

5.jQuery.getJSON(url,[data],[callback])

通过get方式获取json格式的数据。

示例代码如下：

 
 
 
  
  
  $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(req) {
  
  
      $.each(req.items, function(i, item) {
  
  
          if (i == vnum) {
  
  
              $("").appendTo("#showjson");
  
  
          }
  
  
      });
  
  
  });

同样的，这也是jQuery.ajax()方法的一种简写方法，类似如下方法：

 
 
 
  
  
  $.ajax({
  
  
    url: url,
  
  
    dataType: 'json',
  
  
    data: data,
  
  
    success: callback
  
  
  });

可能你还没有使用过json数据，我的小站中已经好几次提到了json的使用，如果你还不熟悉json格式，可以看看jquery移动listbox的值、jQuery下json的使用实例

获得json数据

这里将随机显示一条json数据

到目前为止我们总结了jQuery.ajax的五种简写方法，接下来让我们集中精神，看看jQuery.ajax()方法，在使用中，笔者也是经常使用的jQuery.ajax()，因为大多数情况，我们需要对ajax请求出错的情况进行捕捉并处理。

6.jQuery.ajax()

使用jQuery.ajax()方法获取数据，下边给个常用写法，并做了相应的注释。

 
 
 
  
  
  $.ajax({
  
  
      url: "http://www.microsoft.com",    //请求的url地址
  
  
      dataType: "json",   //返回格式为json
  
  
      async: true, //请求是否异步，默认为异步，这也是ajax重要特性
  
  
      data: { "id": "value" },    //参数值
  
  
      type: "GET",   //请求方式
  
  
      beforeSend: function() {
  
  
          //请求前的处理
  
  
      },
  
  
      success: function(req) {
  
  
          //请求成功时处理
  
  
      },
  
  
      complete: function() {
  
  
          //请求完成的处理
  
  
      },
  
  
      error: function() {
  
  
          //请求出错处理
  
  
      }
  
  
  });

使用jQuery.ajax()

这里将显示数据

本篇的jQuery ajax使用就总结到这里，当然还有一些方法并未能全部的总结。如ajaxStart()、ajaxStop()等，在以后使用中，我会把它们也总结下来。

网站名称：jQuery学习大总结(五)jQueryAjax
标题链接：http://www.csdahua.cn/qtweb/news49/269599.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：快上网

成都快上网为您推荐相关内容