利用jQuery实现Ajax的封装的步骤分享

本篇文章给大家分享的内容是利用jQuery实现Ajax的封装的步骤分享，有着一定的参考价值，有需要的朋友可以参考一下

load方法

• load(url,[data],[callback])。data为提交的数据，callback为回调函数，回调函数可以传三个参数，response stutas xhr，第一个参数为从服务器端返回的内容，第二个参数为响应状态success或error，第三个参数为底层js中XMLHttpRequest对象

• $(‘#box’).load(url)。可直接将从目标地址获取的内容加载填充到当前页面的某处。

全局方法get（）

• $.get(url,[data],[callback],type) type表示返回内容的格式，若不设置返回原本格式，强行转化可能会获取失败

全局方法post（）

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

全局方法getJSON（）

• $.getJSON（）(url,[data],[callback])。

• 用于特定情况下加载json文件

全局方法getSCRIPT（）

• $.getSCRIPT（）(url,[data],[callback])。

• 用于特定情况下加载js文件。一般不用。

全局方法ajax（）

• 只ajax()方法只传递一个参数，即一个包含若干键值对的对象。

• 最常用的格式：

$.ajax({
  url:, //请求的地址
  type:, //请求的方式'GET'或'POST'
  data:{
        },  //提交的信息
  dataType: 'json',//设置返回内容的数据类型
  timeout:  ,//设置超时，请求超过了这个时间值就会结束请求
  global: ,//设置是否触发全局事件，true或false
  error: function(xhr,errorText,errorType){//响应失败时执行的错误处理函数,会传三个参数，xhr对象，错误信息，错误类型
       }
  success:function(response,stutas,xhr){//响应成功后执行的回调函数
     console.log(response);
      },
  beforeSend : function(){//请求开始之前触发该事件},
complete : function(){//请求结束之后触发该事件}
})

表单序列化

• 常规数据提交方式：假设提交数据为表单中的用户名和邮箱地址
  

• data:{ user:document.getElementById(‘user’), 
  emall:document.getElementById(‘emall’)//用dom方法或其他方法只要能获取到数据都行 
   }

  登录后复制

• 表单序列化：
  data：$(‘form’).serialize(),//序列化后得到的是字符串形式的数据键值对，并且对url进行了编码。函数serialize（）的作用对象可以是整个表单也可以是一个表单元素，但只能是jQuery对象。

• param()方法
  $.param()方法是serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化。
  对于第一种直接传递一个对象的提交方式，可以用此函数对整个对象进行序列化。

data:$ .param({   
  user:document.getElementById('user'),
     emall:document.getElementById('emall')
    } )

• serializeArray（）方法
  serializeArray方法是将一个表单当中的各个字段序列化成一个json格式的数组。

加载请求

 jQuery提供两个全局事件。.ajaxStart和.ajaxStop。Ajax请求开始时会触发开始事件，请求结束时会触发结束事件。

$(document).ajaxStart(function(){
     //请求开始时触发的行为
        }).ajaxStop(function(){
     //请求结束时触发的行为})

jQuery xhr对象

jqXHR对象就是$.ajax()方法返回的对象，它是jsXHR对象的一个超集。

var jqXHR = $.ajax(      
      url:, //请求的地址            
      type:, //请求的方式'GET'或'POST'
      data:{
                      },  //提交的信息
             )；

jqXHR对象提供了许多新的属性与方法，支持以连缀的方式去写。可以多次执行同一个回调函数，而不会被覆盖。

以上是利用jQuery实现Ajax的封装的步骤分享的详细内容。更多信息请关注PHP中文网其他相关文章！