jQuery-Ajax应用与常用插件

1-1 使用load()方法异步请求数据

使用load()方法通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中：

load(url, [data], [callback])
// url：加载服务器地址
// 可选项data：请求时发送的数据
// callback：数据请求成功后，执行的回调函数

示例

$(function() {
  $("#btnShow").bind("click", function(){
    var $this = $(this);
    $(".content")
    .html("![](Images/Loading.gif)")
    .load("http://www.imooc.com/data/fruit_part.html", function(){
      $this.attr("disabled", "true");
    });
  });
});

var $this = $(this)

this其实是一个HTML元素
$this 只是个变量名，加"$"是为了说明其是个jquery对象
而$(this)是个转换，将this表示的dom对象转换为jquery对象，这样就可以使用jquery提供的方法操作

1-2 使用getJSON()方法异步加载JSON格式数据

使用getJSON()可以通过Ajax异步请求的方式，获取服务器中的数据，并对数据进行解析，显示在页面中：

jQuery.getJSON(url, [data], [callback])或$.getJSON(url, [data], [callback])
// url：json格式的文件的服务器地址
// data：请求时的数据
// callback：回调函数

示例

$(function(){
  $("#btnShow").bind("click", function(){
    var $this = $(this);
    $.getJSON("Data/sport.json", function(data){
      $this.attr("disabled", "true");
      $.each(data, function(){
        $("ul").append("<li>" + sport["name"] + "</li>");
      })
    });
  });
});

$.each(data, function(index, ele){})

data：要遍历的集合
index：索引值
ele：集合中的子元素

1-3 使用getScript()方法异步加载并执行js文件

jQuery.getScript(url, [callback])或$.getScript(url, [callback])
// url：请求地址
// callback：回调函数

示例

$(function(){
  $("#btnShow").bind("click", function(){
    var $this = $(this);
    $.getScript("Data/sport.js", function(){
      $.this.attr("disabled", "true");
    });
  });
});

1-4 使用get()方法以GET方式从服务器获取数据

$.get(url, [callback])

示例

$(function(){
  $("#btnShow").bind(
    var $this = $(this);
    $.get("Data/info.php", function(data){
      $this.attr("disabled", "true");
      $("ul").append("<li>my name:" + data.name + "</li>");
      $("ul").append("<li>my motto:" + data.motto + "</li>");
    }, "json");
  );
});

json：设置从服务器获取数据的类型，所以得到的数据格式为json类型的
默认get从服务器获取到的数据是字符串类型

1-5 使用post()方法以POST方式从服务器发送数据

$.post(url, [data], [callback])

示例

$(function(){
  $("#btnCheck").bind("click", function(){
    $.post("Data/check.php", {
      num: $("#txtNumber").val() 
    }, function(data){
      $("ul").append("<li>你输入的<b>" + $("#txtNumber").val() + "</b>是<b>" + data + "</b></li>");
    });
  });
});

1-6 使用serialize()方法序列化表单元素值

使用serialize()方法可以将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求：

$(selector).serialize();
// selector：一个或多个表单中的元素或表单元素本身

示例

<button id="btnAction">序列化</button>
<form>
  姓名：<input name="Text1" type="text" />
  性别：<select name="Select1"><option value="0">男</option><option value="1">女</option></select>
  <input name="Checkbox1" type="checkbox" />资料是否可见
</form>
$(function(){
  $("#btnAction").bind("click", function(){
    $("#litest").html($("form").serialize());
    // Text1=yizihan&Select1=0&Checkbox1=on
  });
});

1-7 使用ajax()方法加载服务器数据

使用ajax()方法是最底层、功能最强大的请求服务器数据的方法，它不仅可以获取服务器返回的数据，还能向服务器发送请求并传递数值：

$.ajax([settings])
// settings为发送ajax请求时的配置对象
// 包含url（路径）、data（请求时传递的数据）、dataType（服务器返回的数据类型）、success（请求成功后执行的回调函数）、type（发送数据请求的方式，默认为get）

示例

$(function(){
  $("#btnShow").bind("click", function(){
    var $this = $(this);
    $.ajax({
      url: "Data/article.txt",
      data: { num: $("#txtNumber").val() },
      type: "post",
      success: function(data){
        $this.attr("disabled", "true";
        $("ul").append(data);
      }
    });
  });
});

1-8 使用ajaxSetup()方法设置全局Ajax默认选项

使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不需要再添加这些选项值：

$.ajaxSetup([options])
//

示例

$(function(){
  $.ajaxSetup({
    dataType: "text",
    success: function(){
      $("ul").empty().append(data);
    }
  });
  $("#btnShow_1").bind("click", function(){
    $.ajax({url: "Data/article_1.txt" });
  });
  $("#btnShow_2").bind("click", function(){
    $.ajax({url: "Data/article_2.txt" });
  });
});

1-9 使用ajaxStart()和ajaxStop()方法

ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数：

$(selector).ajaxStart(function())
$(selector).ajaxStop(function())

示例

$(function(){
  $("#divload").ajaxStart(function() { $(this).show(); });
  $("#divload").ajaxStop(function() { $(this).hide(); });
  $("#btnShow").bind("click", function(){
    var $this = $(this);
    $.ajax(
      url: "Data/info.php",
      dataType: "json",
      success: function(data) {
        $this.attr("disabled", "true");
        $("ul").append("<li>my name: " + my.name + "</li>");
      }
    );
  });
});