jquery实现AJAX应用

时间：2015-08-10 19:58:11 阅读：133 评论：0 收藏：0 [点我收藏+]

标签：

刚开始学jquery，记录下jquery使用ajax应用的几个方法。

①使用load()方法异步请求数据：
使用load()方法通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中
，它的调用格式为：load(url,[data],[callback])，其中参数url为加载服务器地址，可
选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。

$(function () {
   $("#btn").bind("click", function () {
     var $this = $(this);
      $("ul")
      .load("URL",function(){
        $this.attr("disabled", "true");
      });
   });
});

②使用getJSON()方法异步加载JSON格式数据
使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数组，并对获取的数据
进行解析，显示在页面中，它的调用格式为：
jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])
其中，url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据
，callback参数为数据请求成功后，执行的回调函数。

$(function () {
  $("#btn").bind("click", function () {
  var $this = $(this);
    $.getJSON("URL",function(data){ //获取URL返回的data文件数据
       $this.attr("disabled", "true");
       $.each(data, function (index, aa) { //aa是为数据起的名字(数组类型)
         $("ul").append("<li>" + aa["name"] + "</li>");
       });
    });
  });
});

③使用getScript()方法异步加载并执行js文件
使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件，它的调用格式如
下所示：jQuery.getScript(url,[callback])或$.getScript(url,[callback])
其中参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。

$(function(){
  $("#btn").bind("click", function () {
    var $this = $(this);
    $.getScript("URL",function() {
       $this.attr("disabled", "true");
    });
  });
});

④使用get()方法以GET方式从服务器获取数据
使用get()方法时，采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求
的数据，它的调用格式如下：$.get(url,[callback])
其中参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。

$(function(){
   $("#btnShow").bind("click", function () {
      var $this = $(this);
      $.get("URL",function(data) {
        $this.attr("disabled", "true");
        $("ul").append("<li>我的名字叫：" + data.name + "</li>");
      },"json"); //json为数据格式
   });
});

⑤使用post()方法以POST方式从服务器发送数据
与get()方法相比，post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后
，进行处理，并将处理结果返回页面，调用格式如下：$.post(url,[data],[callback])
其中参数url为服务器请求地址，可选项data为向服务器请求时发送的数据，可选项callback
参数为请求成功后执行的回调函数。

$(function(){
   $("#btn").bind("click", function () {
   $.post("URL",
      {num :$("#txtNumber").val()},//对象用{},向URL传递num，num为url方法中定义的变量
      function (data) {
        $("ul").append("<li>你输入的<b>"+ $("#txtNumber").val()+"</b>是<b>"
        + data + " </b></li>");
      });
   });
});

⑥使用serialize()方法序列化表单元素值
使用serialize()方法可以将表单中有name属性的元素值进行序列化，生成标准URL编码文
本字符串，直接可用于ajax请求，它的调用格式如下：$(selector).serialize()
其中selector参数是一个或多个表单中的元素或表单元素本身。

$(function () {
   $("#btn").bind("click", function () {
      $("#litest").html($("form").serialize());
   });
});

当点击"btn"按钮后，调用表单"form"元素本身的serialize()方法，将表单中元素全部序列
化，生成标准URL编码，各元素间通过&号相联.

⑦使用ajax()方法加载服务器数据
使用ajax()方法是最底层、功能最强大的请求服务器数据的方法，它不仅可以获取服务器
返回的数据，还能向服务器发送请求并传递数值，它的调用格式如下：
jQuery.ajax([settings])或$.ajax([settings])
其中参数settings为发送ajax请求时的配置对象，在该对象中，url表示服务器请求的路径，
data为请求时传递的数据，dataType为服务器返回的数据类型，success为请求成功的执行
的回调函数，type为发送数据请求的方式，默认为get。

$(function () {
   $("#btn").bind("click", function () {
     $.ajax({
       url: "URL",
       data: { num: $("#txtNumber").val() },
       type: "post",
       success: function (data) {
         $("ul").append("<li>你输入的<b>  "
         + $("#txtNumber").val() + " </b>是<b> "
         + data + " </b></li>");
       }
     });
   });
});

当点击“加载”按钮时，调用$.ajax()方法请求服务器中txt文件，当请求成功时调用
success回调函数，获取传回的数据，并显示在页面中.

⑧使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax
请求将不需要再添加这些选项值，它的调用格式为：
jQuery.ajaxSetup([options])或$.ajaxSetup([options])
其中可选项options参数为一个对象，通过该对象设置Ajax请求时的全局选项值。

$(function () {
   $.ajaxSetup({
      type: "post",
      success: function(data){
         $("ul").append("<li>你输入的<b>  "
         + $("#txtNumber").val() + " </b>是<b> "
         + data + " </b></li>");
      }
   });
   $("#btnShow_1").bind("click", function () {
      $.ajax({
           data: { num: $("#txtNumber").val() },
           url: "URL"
      });
   })
   $("#btnShow_2").bind("click", function () {
      $.ajax({
      data: { num: $("#txtNumber").val() },
      url: "URL"
      });
   });
});

使用ajaxSetup()方法设置了Ajax请求时的一些全局性的配置选项后，在两次调用ajax请求
服务器txt文件时，只需要设置url地址即可.

⑨使用ajaxStart()和ajaxStop()方法
ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前
触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为：
$(selector).ajaxStart(function())和$(selector).ajaxStop(function())
其中两个方法中括号都是绑定的函数，当发送Ajax请求前执行ajaxStart()方法绑定的函数，
请求成功后，执行ajaxStop ()方法绑定的函数。

$(function () {
  $("#divload").ajaxStart(function(){
     $(this).html("正在请求数据...");
  });
  $("#divload").ajaxStop(function(){
     $(this).html("数据请求完成！");
   });
  $("#btnShow").bind("click", function () {
     var $this = $(this);
     $.ajax({
        url: "URL",
        dataType: "json",
        success: function (data) {
        $this.attr("disabled", "true");
        $("ul").append("<li>我的名字叫：" + data.name + "</li>");
        $("ul").append("<li>男朋友对我说：" + data.say + "</li>");
        }
    });
  });
});

jquery实现AJAX应用

标签：

原文地址：http://www.cnblogs.com/jiebai/p/4718877.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行