Detailed Explanation of jquery Ajax Global Call Encapsulation Instance

  • 2021-07-12 04:37:39
  • OfStack

Foreword:

There is a case where the whole station has to call and submit data asynchronously, so you will need $. ajax ({......}) for each operation

Writing duplicate methods and codes is too redundant and a waste of time. Although you have automatic code prompts for completion, it is really not elegant. As a front-end geek, it is not allowed!

"Hey hey! Although I basically don't use jquery now, the asynchronous concept will always be used, so help new people."

jQuery Ajax Universal js Package

Step 1: Introducing the jQuery library


<script type="text/javascript" src="/js/jquery.min.js"></script>

Step 2: Develop Ajax encapsulation class, which has passed the test, can be called directly, paste code directly, and save explanation


/*****************************************************************
         jQuery Ajax Encapsulate generic classes  (linjq)    
*****************************************************************/
$(function(){
  /**
   * ajax Encapsulation 
   * url  The address to send the request 
   * data  Data sent to the server, stored in arrays, such as: {"date": new Date().getTime(), "state": 1}
   * async  Default value : true . By default, all requests are asynchronous. If you need to send a synchronization request, set this option to  false . 
   *     Note that the synchronization request will lock the browser, and the user must wait for the request to complete before performing other operations. 
   * type  Request mode ("POST"  Or  "GET") ,   Default to  "GET"
   * dataType  The type of data expected to be returned by the server, commonly used as: xml , html , json , text
   * successfn  Successful callback function 
   * errorfn  Failed callback function 
   */
  jQuery.ax=function(url, data, async, type, dataType, successfn, errorfn) {
    async = (async==null || async=="" || typeof(async)=="undefined")? "true" : async;
    type = (type==null || type=="" || typeof(type)=="undefined")? "post" : type;
    dataType = (dataType==null || dataType=="" || typeof(dataType)=="undefined")? "json" : dataType;
    data = (data==null || data=="" || typeof(data)=="undefined")? {"date": new Date().getTime()} : data;
    $.ajax({
      type: type,
      async: async,
      data: data,
      url: url,
      dataType: dataType,
      success: function(d){
        successfn(d);
      },
      error: function(e){
        errorfn(e);
      }
    });
  };
  
  /**
   * ajax Encapsulation 
   * url  The address to send the request 
   * data  Data sent to the server, stored in arrays, such as: {"date": new Date().getTime(), "state": 1}
   * successfn  Successful callback function 
   */
  jQuery.axpost=function(url, data, successfn) {
    data = (data==null || data=="" || typeof(data)=="undefined")? {"date": new Date().getTime()} : data;
    $.ajax({
      type: "post",
      data: data,
      url: url,
      dataType: "json",
      success: function(d){
        successfn(d);
      }
    });
  };
  
  /**
   * ajax Encapsulation 
   * url  The address to send the request 
   * data  Data sent to the server, stored in arrays, such as: {"date": new Date().getTime(), "state": 1}
   * dataType  The type of data expected to be returned by the server, commonly used as: xml , html , json , text
   * successfn  Successful callback function 
   * errorfn  Failed callback function 
   */
  jQuery.axspost=function(url, data, successfn, errorfn) {
    data = (data==null || data=="" || typeof(data)=="undefined")? {"date": new Date().getTime()} : data;
    $.ajax({
      type: "post",
      data: data,
      url: url,
      dataType: "json",
      success: function(d){
        successfn(d);
      },
      error: function(e){
        errorfn(e);
      }
    });
  };



});

Step 3: Call the impersonation


<!DOCTYPE html>
<html>
  <head>
    <base href="<%=basePath%>">

    <title>jQuery Ajax Encapsulate general class test </title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <jsp:include page="/view/common/js_taglib.jsp"></jsp:include>
    <script type="text/javascript">
    $(function(){
      $.ax(
        getRootPath()+"/test/ajax.html",
        null,
        null,
        null,
        null, 
        function(data){
          alert(data.code);
        }, 
        function(){
          alert(" There's been a mistake ");
        }
      );
      
      $.axpost(getRootPath()+"/test/ajax.html", null, function(data){
        alert(data.data);
      });
    
      $.axspost(getRootPath()+"/test/ajax.html",
        null, 
        function(){
          alert(" It succeeded ");
        },
        function(){
          alert(" There's been a mistake ");
      });
    });
     </script>
  </head>
  <body>
     
  </body>
</html>


$.axpost(getRootPath()+"/test/ajax.html", null, function(data){
        alert(data.data);
      });

Just fill in the fields url and data to be transmitted, avoiding duplication of work and code redundancy.

Thank you for reading, hope to help everyone, thank you for your support to this site!


Related articles: