Sharing the steps to implement Ajax encapsulation using jQuery

The content of this article is to share the steps of using jQuery to implement Ajax encapsulation. It has a certain reference value. Friends in need can refer to it

load method

• load(url,[data],[callback]). data is the submitted data, callback is the callback function, the callback function can pass three parameters, response stutas xhr, the first parameter is the content returned from the server, the second parameter is the response status success or error, the third parameter It is the XMLHttpRequest object

• $('#box').load(url) in the underlying js. The content obtained from the target address can be directly loaded and populated somewhere on the current page.

Global method get()

• $.get(url,[data],[callback],type) type represents the returned content Format, if the original format is not set, forced conversion may fail.

Global method post()

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

Global method getJSON()

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

• Used to load json files under specific circumstances

Global method getSCRIPT()

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

• is used to load js files under specific circumstances. Generally not used.

Global method ajax()

• Only the ajax() method only passes one parameter, which is an object containing several key-value pairs.

• The most commonly used format:

$.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(){//请求结束之后触发该事件}
})

Form serialization

• General data submission method: Assume that the submitted data is the user name and email address in the form
  

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

• Form serialization:
  data: $('form').serialize (), //After serialization, the data key-value pair is obtained in the form of a string, and the URL is encoded. The object of the function serialize() can be the entire form or a form element, but it can only be a jQuery object.

• param() method
  $.param() method is the core of the serialize() method, which is used to serialize an array or object according to key/value.
  For the first submission method of directly passing an object, you can use this function to serialize the entire object.

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

• serializeArray() method
  The serializeArray method serializes each field in a form into an array in json format.

Loading request

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

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

jQuery xhr object

The jqXHR object is the object returned by the $.ajax() method, which is a super of the jsXHR object set.

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

The jqXHR object provides many new properties and methods, and supports writing in a concatenated manner. The same callback function can be executed multiple times without being overwritten.

The above is the detailed content of Sharing the steps to implement Ajax encapsulation using jQuery. For more information, please follow other related articles on the PHP Chinese website!