Analysis of jQuery Ajax General js encapsulation and jqueryajaxjs

Analysis of jQuery Ajax General js encapsulation and jqueryajaxjs

This article is divided into three steps to implement jquery ajax through js encapsulation and code examples. The code is easy to understand with annotations. The details are as follows:

Step 1: Introduce the jQuery Library

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

Step 2: Develop the Ajax encapsulation class. It has been tested and can be called directly. paste the Code directly to save the trouble.

/*************************************** * ************************ JQuery Ajax encapsulates generic classes (linjq) **************************************** * ***********************/$ (function () {/*** ajax encapsulate * url sending request address * data sent to the server, array storage, for example: {"date": new Date (). getTime (), "state": 1} * async default value: true. By default, all requests are asynchronous requests. To send a synchronization request, set this option to false. * Note: The synchronization request will lock the browser. Other operations can be performed only after the request is completed. * Type Request Method ("POST" or "GET"). The default value is "GET" * the data type that the dataType expects to return from the server. Common data types include: xml, html, json, text * successfn success callback function * errorfn failure 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 encapsulate * url sending request address * data sent to the server data, array storage, such: {"date": new Date (). getTime (), "state": 1} * successful callback function of successfn */jQuery. axs = 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 encapsulate * url sending request address * data sent to the server data, array storage, such: {"date": new Date (). getTime (), "state": 1} * data types that are expected to be returned by the dataType server, commonly used for example: xml, html, json, text * successfn success callback function * errorfn failure callback function */jQuery. axse = function (url, data, successfn, errorfn) {data = (data = null | data = "" | type Of (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 Simulation

<% @ Page language = "java" pageEncoding = "UTF-8" %> <% String path = request. getContextPath (); String basePath = request. getScheme () + ": //" + request. getServerName () + ":" + request. getServerPort () + path + "/"; %> <! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> 
The above section describes the jQuery Ajax General js encapsulation knowledge. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!