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

Source: Internet
Author: User
Tags json min

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

1 2 3 4 <!--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

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 "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

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

What are the values in the Options object?

There are a few commonly used properties:

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 own first extra parameter"},//This parameter refers to a parameter that is submitted to the server via Ajax in addition to the form's internal input///in the background using string Param1=req.getparameter ("param1"); Datatype:null, DataType: ' json ',//The value of this parameter is the data type returned by the server, the default is NULL//the server can return the string by default, and then place these strings within target//And of course, JSON, XML , the most common of which is null and JSON//For JSON use, we will explain later to Beforesubmit:showrequest, Success:successres, type: ' POST '//Submit method, The default is to use the method//If it is not specified on the form label. 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:

1 2 3 4 5 6 7 8 9 10 var options = {target: ' #output1 ', DataType: ' json ', beforesubmit:showrequest, success:successres//Note, Successres method looks There is no parameter//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.

1 2 3 4 5 6 7 8 9 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 that Full alert is filled (' input has no fill options ');//if validation does not pass, return False to false;} var formelement = jqform[0]; Alert ($ (jqform[0].name). attr ("maxlength")); return true; }
Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.