Query plug-in-use of ajaxform ajaxsubmit

Nowadays, Ajax is everywhere, and forms, as the focus, are naturally taken care.

In fact, we usually use jquery to submit forms asynchronously. Generally, $. Ajax is used in submit. For example:

 

    $(function(){        $(‘#myForm‘).submit(function(){            $.ajax({                url:"/WebTest/test/testJson.do",                data:$(‘#myForm‘).serialize(),                dataType:"json",                error:function(data){                    alert(data);                },                success:function(data){                    alert(data);                }            });        });            }) 

 

This method masks the form function and makes it a disguised form of Ajax. Let's take a look at the ajaxform that conforms to the form idea.

 

Ajaxform:

Download: http://files.cnblogs.com/china-li/jquery.form.js

Two major APIs: ajaxform () ajaxsubmit ().

After ajaxform () is configured, It is not submitted immediately, but waited for the submit () event. It is just a preparation. General Usage:

 

$(document).ready(function() {     var options = {         target:        ‘#output1‘,   // target element(s) to be updated with server response         beforeSubmit:  showRequest,  // pre-submit callback         success:       showResponse  // post-submit callback          // other available options:         //url:       url         // override for form‘s ‘action‘ attribute         //type:      type        // ‘get‘ or ‘post‘, override for form‘s ‘method‘ attribute         //dataType:  null        // ‘xml‘, ‘script‘, or ‘json‘ (expected server response type)         //clearForm: true        // clear all form fields after successful submit         //resetForm: true        // reset the form after successful submit          // $.ajax options can be used here too, for example:         //timeout:   3000     };      // bind form using ‘ajaxForm‘     $(‘#myForm1‘).ajaxForm(options).submit(function(){return false;}); });

 

This is an official example, but he has not submitted it. In the submission, false is returned to prevent its default submission action. Instead, Ajax is used for interaction.

The options attributes are described as follows:

 

The results returned by target will be placed under this target. If the URL is defined, the data types returned by datatype will be overwritten by the actiontype get and post methods of the original form. Optional values: JSON, XML, and scriptclearform true, this indicates that after successful submission, all form field values are cleared. resetform true indicates that all fields are reset after successful submission. If this parameter is set, the function ($ form, options) {} beforesubmit before submission: function (ARR, $ from, options) {} after successful submission of success: function (data, statustext) {} error: function (data) {alert (data. message );}

 

Example of ajaxsubmit:

 

$(document).ready(function() {     var options = {         target:        ‘#output2‘,   // target element(s) to be updated with server response         beforeSubmit:  showRequest,  // pre-submit callback         success:       showResponse  // post-submit callback          // other available options:         //url:       url         // override for form‘s ‘action‘ attribute         //type:      type        // ‘get‘ or ‘post‘, override for form‘s ‘method‘ attribute         //dataType:  null        // ‘xml‘, ‘script‘, or ‘json‘ (expected server response type)         //clearForm: true        // clear all form fields after successful submit         //resetForm: true        // reset the form after successful submit          // $.ajax options can be used here too, for example:         //timeout:   3000     };      // bind to the form‘s submit event     $(‘#myForm2‘).submit(function() {         // inside event callbacks ‘this‘ is the DOM element so we first         // wrap it in a jQuery object and then invoke ajaxSubmit         $(this).ajaxSubmit(options);          // !!! Important !!!         // always return false to prevent standard browser submit and page navigation         return false;     }); }); 

 

The parameter configurations are similar. Only ajaxsubmit () can be submitted at any time!

 

Other APIs:

 

$(‘#myFormId‘).clearForm();$(‘#myFormId .specialFields‘).clearFields();$(‘#myFormId‘).resetForm();var value = $(‘#myFormId :password‘).fieldValue();var queryString = $(‘#myFormId .specialFields‘).fieldSerialize();