Jquery.form.js implement the method of submitting form submission to Ajax way _jquery

The example in this article describes the Jquery.form.js implementation method of submitting form submission to Ajax. Share to everyone for your reference. The specific analysis is as follows:

This framework sets form to submit, verify, and upload functions.
This framework must be combined with the full jquery version, otherwise the Min will not work.
Principle: Using JS to assemble the form into Ajax URL and data, the principle or use Ajax to submit, in fact, this can be written by themselves, but the framework may be simpler.

One, the simplest example:

The first step: refer to JS

<!--here the Min is their own JS compression tool for the full version of the compression is
not really the min, so that-->
<script type= "Text/javascript src=" js/ Jquery-1.7.min.js "></script>
<script type=" Text/javascript "src=" Js/jquery.form.js "></" Script>

Step Two: Page Write form

<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= "/>
</form> <div id=
" output1 "style=" 
width : 1000px;height:200px;background-color: #eee; " >
</div>

The third step: Write JS call jquery.form.js, to the form form for AJAX submission

$ (document). Ready (function () {var options = {target: ' #output1 ',//The data passed from the service is displayed inside the Div, which is the Ajax local refresh Beforesubmi
 T:showrequest,//AJAX submission prior to processing Success:showresponse//processing after processing};
  $ (' #showDataForm '). Submit (function () {$ (this). Ajaxsubmit (options); 
  return false;
 Very important, if false, it is not jump//processing on this page, that is, Ajax, if it is false, then the traditional form jump.
});
}); function Showresponse (responsetext, StatusText, XHR, $form) {alert (xhr.responsetext+ "= =" + $form. attr ("method") + '
Status: ' + StatusText + ' \n\nresponsetext: \ n ' + responsetext); XHR: Description You can use AJAX to make your request again//$form: Is that form object, is a jquery object//statustext: State, success is success//responsetext, The server returns a string (including, of course, HTML, not including JSON)} function Showrequest (FormData, Jqform, options) {//formdata is an array, which is the key value map array of each input//
 This method is used to work out the strings together.
 FormData: A patchwork of form strings, such as Name=hera&password, is actually the key value pair for input in each form,//If added method=xxxx, that's the equivalent of 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, return true to indicate that you validated//succeeded before submitting Ajax, then submit AJAX form//if validation is unsuccessful, return non true, do not commit returns true; }

What are the values in the Options object?

There are a few commonly used properties:

var options = {
 target: ' #output1 ', 
 data:{param1: "My own first extra argument"},
// This parameter refers to the use of Ajax to submit to the server in addition to the form internal input parameters
//In the background using string Param1=req.getparameter ("param1");
 //Datatype:null,
 dataType: ' json ',//
This parameter value is the data type returned by the server, the default is null//the
server can return the string by default, These strings are then placed within target
//And of course json, XML, where the most common is null and JSON
//For the use of JSON, we will explain later to
 Beforesubmit: Showrequest,
 success:  successres,
 type: ' POST '
 //Submit mode, by default, the method specified on the form label itself
 //if not specified, Then use get. URL
 : '
 //resubmit URL, that is, URL can be configured in form
 //can also be configured here.
};

Iii. How to parse the JSON data that the server passes over

We know that using the Ajax method provided by jquery, if the server passes back the JSON data, it is a JSON object that can be converted to JS, and then it can be json.xxx to get the corresponding value. So what about the framework?
1 First specify datatype in the options parameter: ' JSON '
2) submission through the framework
3) Server receive
4) server returns JSON
5) page JS receive JSON
The key is the fifth step, how to JS receive JSON, can be done through the success: The method specified in the following operations:

var options = {
 target: ' #output1 ', 
 dataType: ' json ',
 beforesubmit:showrequest,
 success:  Successres
//Note that the Successres method does not seem to have parameters
//But why the following method can have parameters, it can be so passed.
function Successres (jsondata) {
 alert (jsondata.param1);
}

How to use this framework for simple verification?

When it comes to validation, it must be in the Beforesubmit method internal verification, how to verify, because this method has been Jqform objects, and formdata have been passed to you, you can take these two parameters to obtain the corresponding input, and then make their own judgments, if the success of the decision , it is submitted.

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 if full alert is filled
  (' input has no fill options ');
  Returns false return False if validation is not passed
  ;
 }
 var formelement = jqform[0];
 Alert ($ (jqform[0].name). attr ("maxlength"));
 return true;
}

Jquery.form.js file Click here to download the site.

I hope this article will help you with your jquery programming.