jq中的ajax

常用选项参数介绍：
url：请求地址
type：请求方法，默认为 get
dataType：服务端响应数据类型
contentType：请求体内容类型，默认 application/x-www-form-urlencoded
data：需要传递到服务端的数据，如果 GET 则通过 URL 传递，如果 POST 则通过请求体传递
timeout：请求超时时间
beforeSend：请求发起之前触发
success：请求成功之后触发（响应状态码 200）
error：请求失败触发
complete：请求完成触发（不管成功与否）
==============================================================
demo1：

$.ajax({
  url: 'json.php',
  type: 'get',
  // 设置的是请求参数
  data: { id: 1, name: '张三' },
  // 用于设置响应体的类型 注意 跟 data 参数没关系！！！
  dataType: 'json',
  success: function (res) {
    // 一旦设置的 dataType 选项，就不再关心 服务端 响应的 Content-Type 了
    // 客户端会主观认为服务端返回的就是 JSON 格式的字符串
    console.log(res)
  }
})

==============================================================
demo2:

$.ajax({
  url: 'time.php',
  type: 'get',
  beforeSend: function (xhr) {
    // 在所有发送请求的操作（open, send）之前执行
    console.log('beforeSend', xhr)
  },
  success: function (res) {
    // 隐藏 loading
    // 只有请求成功（状态码为200）才会执行这个函数
    console.log(res)
  },
  error: function (xhr) {
    // 隐藏 loading
    // 只有请求不正常（状态码不为200）才会执行
    console.log('error', xhr)
  },
  complete: function (xhr) {
    // 不管是成功还是失败都是完成，都会执行这个 complete 函数
    console.log('complete', xhr)
  }
})

==============================================================
demo3:
get&&&post&JSON的快捷请求方法：

 $.get('json.php', { id: 1 }, function (res) {
   console.log(res)
 })

 $.post('json.php', { id: 1 }, function (res) {
  console.log(res)
})

 $.getJSON('json.php', { id: 1 }, function (res) {
   console.log(res)
 })

===========================================================
jQuery全局事件处理函数：

  $(document)
  .ajaxStart(function () {
    // 只要有 ajax 请求发生 就会执行
    $('.loading').fadeIn()
    // 显示加载提示
    console.log('注意即将要开始请求了')
  })
  .ajaxStop(function () {
    // 只要有 ajax 请求结束 就会执行
    $('.loading').fadeOut()
    // 结束提示
    console.log('请求结束了')
  })

$('#btn').on('click', function () {
  // $.ajax({
  //   url: 'time.php'
  // })

  $.get('time.php')
})

jq中的ajax

推荐阅读更多精彩内容