Use jquery for a perfect form asynchronous commit

jquery asynchronously submits a form

1 <formID= "Form1"Method= "POST">2     <TableBorder= "1">3         <TR>4             <TD>User name:</TD>5             <TD>6                 <inputtype= "text"name= "LoginName" /></TD>7         </TR>8         <TR>9             <TD>Hobby</TD>Ten             <TD> One                 <inputtype= "checkbox"name= "Cbloveyy"value= "1" />Swimming A                 <inputtype= "checkbox"name= "Cbloveyx"value= "1" />Game -                 <inputtype= "checkbox"name= "Cbloveps"value= "1" />Climbing -             </TD> the         </TR> -         <TR> -             <TDcolspan= "2"style= "Text-align:center"> -                 <inputID= "Btnajaxsubmit"type= "Submit"value= "Jquery.ajax commit" /> +             </TD> -         </TR> +     </Table> A </form>

1<script type= "Text/javascript" >2$ (document). Ready (function () {3$ ("#btnAjaxSubmit"). Click (function () {4             varOptions = {5URL: ' Async_submit_test1.aspx?action=saveuserinfo ',6Type: ' Post ',7DataType: ' Text ',8Data: $ ("#form1"). Serialize (),9Successfunction(data) {Ten                     if(Data.length > 0) One$ ("#responseText"). text (data); A                 } -             }; - $.ajax (options); the             return false; -         }); -     }); -</script>

We pass $ ("#form1"). Serialize () Converts the data of a form element into a string and then executes an asynchronous request resource through $.ajax ().

Scenario: Jquery.ajax () +. aspx request

Advantages of this scenario:

1) We do not feel the "flash" effect of the page

2) We do not experience a "hundreds of pages" of bad user experiences due to server time-consuming responses.

Disadvantages of this scenario:

1) In this scenario, I still use the ASPX page to respond to the request, only in the background through the action parameter to do the corresponding processing, although it is asynchronous operation but finished the full run over the ASP. NET page life cycle (this is also in Response.Write () You must call Response.End () after you have finished outputting your own stuff, or you can terminate the lifecycle prematurely, or the page information will return together.

2) The jquery library provides a serialized form string method that does not collect file-uploaded form elements, such as $ ("#form1"). Serialize (). So for forms that include file uploads, we also need to submit via <iframe> mock async forms. (<iframe> simulate the process of asynchronous form submission I'll explain it in the Code section of the analysis Jquery.form plugin)

(The Elements property of the form is provided by the jquery library when the data source of the serialized string is, while the <input type= "file"/> The table element is not included in the elements)

Of course Jquery.ajax () can also be combined with. ashx files (typically processed files) or other ways to implement efficient asynchronous requests, this is just to illustrate: asynchronous request ASPX pages will also run aside the fact of the ASPX page life cycle.

Jquery.form plugin for easy form submission

Now we use jquery's form plug-in Jquery.form.js (official website) to implement asynchronous form submission.

1) The plugin requires a jquery minimum version of v1.5

2) The plugin provides two forms of form submission for Ajaxsubmit and ajaxform, but do not use the same form in both ways.

I will now implement an efficient asynchronous form submission through the Jquery+jquery.form plug-in +ashx (generic processing file).

1 <formID= "Form1"Action= "Ajaxoperation.ashx"Method= "POST">2     <TableBorder= "1">3         <caption>JQuery.form.js Asynchronous Commit Method</caption>4         <TR>5             <TD>User name:</TD>6             <TD>7                 <inputtype= "text"name= "LoginName" /></TD>8         </TR>9         <TR>Ten             <TDcolspan= "2"style= "Text-align:center"> One                 <ButtonID= "Btnajaxsubmit">Ajaxsubmit Submit</Button> A                 &nbsp; -                 <inputID= "Btnajaxform"type= "Submit"value= "Ajaxform commit" /> -             </TD> the         </TR> -     </Table> - </form>

1) Specify the action value for the <form> tag and specify that the form request be processed using AJAXOPERATION.ASHX.

2) Use the two commit buttons Btnajaxsubmit and Btnajaxform respectively for the two form submission APIs provided by the Jquery.form plugin.

The jquery form plug-in submission code is as follows:

1<script type= "Text/javascript" >2$ (document). Ready (function () {3     varOptions = {4Successfunction(data) {5$ ("#responseText"). text (data);6         }7     };8  9         //AjaxformTen$ ("#form1"). Ajaxform (options); One   A         //Ajaxsubmit -$ ("#btnAjaxSubmit"). Click (function () { -$ ("#form1"). Ajaxsubmit (options); the         }); -     }); -</script>

Scenario: JQuery.form.js plugin +. ASHX Request

Advantages of this scenario:

1) Simply a few lines of code, we can implement the form of the submission, and flexible through the ajaxsubmit () function based on the triggering of any event to implement form asynchronous submission.

2) Support the file upload function, and support the progress bar update in the new browser. (In the Jquery.form plug-in source analysis will be explained)

3) A perfect combination with the jquery library, supports the various events triggered by the Jquery.ajax () function, and supports the parameters passed in Jquery.ajax (). (In the Jquery.form plug-in source analysis will be explained)

Well, such a short and easy-to-read code, such a lazy way is not what we pursue it? Is the form submission API provided by the Jquery.form plugin efficient? What did the interior do? Then follow me to see the jquery.form plug-in internal implementation ...

Use jquery for a perfect form asynchronous commit