Jquery. form. js implements the method of converting form submission to ajax submission. jquery. form. jsajax

Jquery. form. js implements the method of converting form submission to ajax submission. jquery. form. jsajax

This example describes how to convert form submission to ajax submission using jquery. form. js. Share it with you for your reference. The specific analysis is as follows:

This framework sets the form submission, verification, and upload functions.
This framework must be combined with the full version of jquery; otherwise, min is invalid.
Principle: javascript is used to assemble the form into ajax URLs and data. The principle is to use ajax for submission. In fact, this can be completely written by yourself, but this framework may be simpler.

I. simplest example:

Step 1: Reference js

<! -- Here min is the compression of the full version by using js compression tools. It is not the real min, so easy --> <script type = "text/javascript" src = "js/jquery-1.7.min.js"> </script> <script type = "text/javascript" src = "js/jquery. form. js "> </script>

Step 2: Write form on the page

<Form id = "showDataForm" action = "/024pm/f_shopUser.do? Method = login "method =" post "> <input type =" text "value =" "name =" name "maxlength =" 2 "/> <input type =" password" value = "" name = "password" maxlength = "2"/> <input type = "submit" value = "submit"/> </form> <div id = "output1 "style =" width: 1000px; height: 200px; background-color: # eee; "> </div>

Step 3: Write js and call jquery. form. js to submit form ajax

$ (Document ). ready (function () {var options = {target: '# output1', // the data transmitted from the service is displayed in this div, that is, ajax partial refresh beforeSubmit: showRequest, // processing success before ajax submission: showResponse // processing after processing}; $ ('# showDataForm '). submit (function () {$ (this ). ajaxSubmit (options); return false; // it is very important. If it is false, it indicates that it is not redirected. // it is processed on this page, that is, ajax. If it is not false, the traditional form jump. }) ;}); Function showResponse (responseText, statusText, xhr, $ form) {alert (xhr. responseText + "=" + $ form. attr ("method") + 'status: '+ statusText +' \ n \ nresponseText: \ n' + responseText); // xhr: it means you can use ajax to send a request again // $ form: the form object, a jquery object // statusText: status, and success // responseText if the request succeeds, the server returns a string (of course html, not json)} function showRequest (formData, jqForm, options) {// formData is an array, is the map array of the key values of each input. // This method is used. Process and piece together strings. // FormData: The assembled form string, such as name = hera & password. // It is actually the key-value pair of input in each form. // If method = XXXX is added, that is equivalent to the data in ajax. Var queryString = $. param (formData); alert (queryString + "====" + formData. length); for (var I = 0; I <formData. length; I ++) {alert (formData [I]. value + "====================" + formData [I]. name);} // jqForm, jquery form object var formElement = jqForm [0]; alert ($ (formElement ). attr ("method"); alert ($ (jqForm [0]. name ). attr ("maxlength"); // very important. If true is returned, it indicates that you have successfully verified the request before submitting ajax. If ajax form is submitted, the return value is not true, and return true is not submitted ;}

2. What are the values in the options object?

There are several common attributes:

Var options = {target: '# output1', data: {param1: "My first extra parameter "}, // this parameter is used to submit the input parameter in the form to the server through ajax. // The String param1 = req is used in the background. getParameter ("param1"); get. // DataType: null, dataType: 'json', // the data type returned by the server. The default value is null // that is, the server can return a string by default, then place these strings inside the target. // Of course, json and xml are available. The most commonly used strings are null and json. // For json usage, we will explain them to beforeSubmit: showRequest later, success: successRes, type: 'post' // submission method. The default method is the method specified on the form tag. If no method is specified, get is used. Url: ''// re-submitted url, that is, url can be configured in form // or here .};

Iii. How to parse the json data transmitted by the server

We know that, using the ajax method provided by jquery, if the server passes back json data, it can be converted to a json object of js, and then the corresponding value can be obtained through json. xxx. What about this framework?
1) First, specify the ype: 'json' in the options parameter'
2) submit through the framework
3) server reception
4) The server returns json
5) page js receives json
The key is Step 5. How to receive json in js is to perform the following internal operations through success:

Var options = {target: '# output1', dataType: 'json', beforeSubmit: showRequest, success: successRes // note that, the successRes method does not seem to have any parameters. // but why can the following method have parameters? It can be passed in this way. Function successRes (jsonData) {alert (jsonData. param1 );}

4. How can we use this framework for simple verification?

When it comes to verification, it must be verified within the beforeSubmit method. How to verify it, because this method has passed the jqform object and formData to you, you can use these two parameters to obtain the corresponding input, and then make your own judgment. If the judgment is successful, submit.

Function showRequest (formData, jqForm, options) {for (var I = 0; I <formData. length; I ++) {alert (formData [I]. value + "========" + formData [I]. name); if (! FormData [I]. value) {// verify whether the alert is complete ('input is not filled with the options'); // If the verification fails, false return false ;}} var formElement = jqForm [0]; alert ($ (jqForm [0]. name ). attr ("maxlength"); return true ;}

Click here to download the jquery. form. js file.

I hope this article will help you with jQuery programming.