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

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

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

1 2 3 4

<! -- Here min is the compression of the full version by using the js compression tool. It's not really min, so it's 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

1 2 3 4 5 6 7 8 9

<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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

$ (Document). ready (function (){ Var options = { Target: '# output1 ', // The data transmitted from the service is displayed inside the div. That is, ajax partial refresh BeforeSubmit: showRequest, // Processing before ajax submission Success: showResponse // Processing after processing }; $ ('# ShowDataForm'). submit (function (){ $ (This). ajaxSubmit (options ); Return false; // Very important. If it is false, it indicates no jump // Handle this page, that is, ajax. If it is not false, the traditional form jumps. }); }); Function showResponse (responseText, statusText, xhr, $ form ){ Alert (xhr. responseText + "=" + $ form. attr ("method") + 'status: '+ StatusText + '\ n \ nresponseText: \ n' + responseText ); // Xhr: indicates that you can use ajax to send a request again. // $ Form: the form object. It is a jquery object. // StatusText: status. If it succeeds, it is success. // ResponseText. The server returns a string (including html, not json, of course) } Function showRequest (formData, jqForm, options ){ // FormData is an array, which is the map array of the key values of each input. // This method is used to 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, it 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 ")); // It is very important. If true is returned, it indicates that you verify it before submitting ajax. // If the request is successful, the ajax form is submitted. // If the verification fails, non-true is returned and no submission is made. Return true; }

2. What are the values in the options object?

There are several common attributes:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Var options = { Target: '# output1 ', Data: {param1: "My first extra parameter "}, // This parameter refers to the parameter used to submit the form internal input to the server through ajax. // Use String param1 = req. getParameter ("param1") in the background. // DataType: null, DataType: 'json ', // The value of this parameter is the data type returned by the server. The default value is null. // That is, the server can return strings by default, and then place these strings inside the target // Of course, there are json and xml, among which null and json are the most commonly used // For json usage, we will explain it later BeforeSubmit: showRequest, Success: successRes, Type: 'post' // Submission method. By default, the method specified on the form label is used. // If not specified, use get. Url :'' // Re-submit the url, that is, the url can be configured in form // You can also configure it 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:

1 2 3 4 5 6 7 8 9 10

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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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 information is complete Alert ('input options '); // If the verification fails, false is returned. Return false; } } Var formElement = jqForm [0]; Alert ($ (jqForm [0]. name). attr ("maxlength ")); Return true; }