jQuery ajax

Posted Be a stonecutter.

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery ajax相关的知识,希望对你有一定的参考价值。

回顾原生JS ajax

查看之前的博文 ajax 和 mock 数据
w3school 关于ajax

原生JS ajax 的用法

  var xhr = new XMLHttpRequest()
  xhr.open(\'GET\',\'https://www.easy-mock.com/mock/5b7238fdf22b3d63d2d67b28/jQuery-mock-test\',true)
  xhr.send()
  xhr.addEventListener(\'load\',function(){
    console.log(xhr.status)
    if((xhr.status >= 200 && xhr.status < 300)|| xhr.status === 304){
      var data = xhr.responseText
      console.log(data)
    }else{
      console.log(\'error\')
    }
  })
  xhr.onerror = function(){
    console.log(\'error\')
  }

 

jQuery 的 ajax 用法

先看一个 $.ajax 的案例

  $.ajax({
    url: \'https://www.easy-mock.com/mock/5b7238fdf22b3d63d2d67b28/jQuery-mock-test\',
    method: \'GET\'
  }).done(function(result){
    console.log(result)
  }).fail(function(){
    console.log(\'error\')
  })

最下 demo 模拟该 ajax 案例,mock 数据结果如下图

 
 

 

jQuery.ajax( [settings ] )

方法提供了几个常用的setting

  • async:默认设置下,所有请求均为异步请求(也就是说这是默认设置为 true)。如果需要发送同步请求,请将此选项设置为false

  • beforeSend:请求发送前的回调函数,用来修改请求发送前 jqXHR 对象,此功能用来设置自定义 HTTP 头信息,等等。该 jqXHR 和设置对象作为参数传递

  • cache:如果设置为false ,浏览器将不缓存此页面。注意:设置cachefalse将在 HEAD 和 GET 请求中正常工作。它的工作原理是在 GET 请求参数中附加"_={timestamp}"

  • context:这个对象用于设置 ajax 相关回调函数的上下文。 默认情况下,这个上下文是一个 ajax 请求使用的参数设置对象

  • data:发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后面,POST请求作为表单数据

  • headers:一个额外的{键:值}对映射到请求一起发送。此设置会在 beforeSend 函数调用之前被设置;因此,请求头中的设置值,会被 beforeSend 函数内的设置覆盖

  • method:HTTP 请求方法(比如:"POST","GET ","PUT",1.9之前使用 type

jQuery.get( [settings] ) / jQuery.post( [settings ] )

这两个方法专门用来处理 getpost 请求

$.ajax 写法

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
})

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
})

 

$.get 写法

  $.get(\'https://www.easy-mock.com/mock/5b7238fdf22b3d63d2d67b28/jQuery-mock-test\').done(function(result){
    console.log(result)
  })

 

jQuery.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] )

$.ajax 写法

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
})

$.getJSON 写法

  $.getJSON(\'https://www.easy-mock.com/mock/5b7238fdf22b3d63d2d67b28/jQuery-mock-test\',function(result){
    console.log(result)
  })

 

.serialize() / serializeArray()

将用作提交的表单元素的值编译成字符串,方法没有参数,使用标准的 URL-encoded 符号上建立一个文本字符串. 它可以对一个代表一组表单元素的 jQuery 对象进行操作,比如<input>, <textarea>, 和 <select>

<form id="holder">
  <input type="text" name="a" value="1"/>
  <div>
    <input type="text" name="b" value="2" id="b" />
  </div>
  <input type="hidden" name="c" value="3" id="c" />
  <div>
    <input type="checkbox" name="f" value="8" checked="true"/>
    <input type="checkbox" name="f" value="9" checked="true"/>
  </div>
</form>
$("#holder").serialize(); //a=1&b=2&c=3&f=8&f=9

$("#holder").serializeArray();
/*
    [
      {name: \'a\', value: \'1\'},
      {name: \'b\', value: \'2\'},
      {name: \'c\', value: \'3\'},
      {name: \'f\', value: \'8\'},
      {name: \'f\', value: \'9\'}
    ]
*/

serializeserializeArray 都是针对 jQuery对象(选中的 form 元素)进行操作,只是返回值格式不同。

特别注意:这2个 API 只能操作form,如果将 holder 改成 div,则不起任何作用。

Demo 地址

上面案例的 ajax 模拟

以上是关于jQuery ajax的主要内容,如果未能解决你的问题,请参考以下文章

jQuery高级Ajax

十条jQuery代码片段助力Web开发效率提升

十条jQuery代码片段助力Web开发效率提升

使用 JQuery ajax 在 DOM 操作后附加事件

使用 Jquery 的同步“Ajax”调用似乎不起作用

前端面试题之手写promise