jQuery中的ajax

jQuery库拥有完整的Ajax兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据,jQuery中有多种ajax的请求方式,例如load(),$.ajax(),$.get(),$.post(),$.getJson()等

$(selector).load()

$(selector). load( url,data,function(response,status,xhr) )
load()方法通过AJAX请求从服务器加载数据,并把返回的数据放置到指定的元素中,默认get请求.

url 规定要将请求发送到哪个 URL。
data 可选。规定连同请求发送到服务器的数据。
function(response,status,xhr) 可选。规定当请求完成时运行的函数。
参数：response 包含来自请求的结果数据 status 包含请求的状态 xhr 包含 XMLHttpRequest 对象

//把hello.txt的文本内容加载至$('#box');
$('#box').load('hello.txt', function(response,status,xhr){
  console.log(response)
  console.log(status)
  console.log(xhr)
});

$.get()

$(selector).get(url,data,success(response,status,xhr),dataType)
get()方法通过远程HTTP GET请求载入信息

url 必需规定请求的url
data 可选规定发送请求的数据
success(response, status, xhr) 可选请求成功时的回调函数
dataType 可选规定服务器响应返回的数据类型

1
2
3

$.get('hello.txt', function (data) {
  console.log(data)
})

$.post()

$(selector).post(url,data,success(response,status,xhr),dataType)
post()方法通过远程HTTP POST请求从服务器载入数据

url 必需规定请求的url
data 可选规定发送请求的数据
success(response, status, xhr) 可选请求成功时的回调函数
dataType 可选规定服务器响应返回的数据类型

1
2
3

$.post('order.php', { id: '1000'}, function (data) {
  console.log(data)
})

$.getJSON()

$(selector).getJSON(url,data,success(response,status,xhr))
getJSON()方法通过远程HTTP GET请求载入JSON数据

url 必需规定请求的url
data 可选规定发送请求的数据
success(response, status, xhr) 可选请求成功时的回调函数

1
2
3

$.getJSON('order.php', { id: '1000'}, function (data) {
  console.log(data)
})

$.ajax()

$.ajax()方法是JQuery将Ajax数据请求进行了封装，并指明请求的方式、地址、数据类型，以及回调方法等。

url 必需发送请求的url地址
type 请求类型 (“POST” 或 “GET”等)，默认为 “ GET “。
async 是否异步默认为true(即请求均为异步),false 设置请求为同步,操作必须等请求完成才可继续执行
data 发送到服务器的数据 get请求会附加在地址栏上
beforeSend 发送请求前修改XHR对象,如自定义HTTP头
complete 当请求完成时调用函数—不管成功还是失败都会调用
dataType 预期服务器返回的数据类型 (xml,json,xml,text,html等)
cache 默认为true,设置为false将不缓存请求信息
timeout 设置请求超时时间(毫秒)
success 请求成功回调函数
error 请求失败回调函数
xhrFields: {withCredentials: true} 通过将withCredentials属性设置为true，可以指定某个请求应该发送凭据。
crossDomain: true

$('#send').click(function(){
  $.ajax({
    type: "POST",
    url: "XXX.php",
    data: {username:$("#username").val(), content:$("#content").val()},
    dataType: "json",
    timeout: 30000,
    beforeSend: function(){
      // 设置请求头
      request.setRequestHeader("BBG-Key", "ab9ef204-3253-49d4-b229-3cc2383480a6");
      // 防止重复提交
      $("#submit").attr({ disabled: "disabled" });
      // 设置loading
      $("loading").show();
    },
    success: function(data){
      $('#resText').empty();   //清空resText里面的所有内容
      var html = '';
      $.each(data, function(commentIndex, comment){
        html += '<div class="comment"><h6>' + comment['username']
            + ':</h6><p class="para"' + comment['content']
            + '</p></div>';
      });
      $('#resText').html(html);
    },
    error: function(err){
      console.log(err)
    },
    complete: function(){ // 不管成功还是失败都会调用
      // 关闭loading
      $("loading").show();
    }
  });
});