Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what is jquery.form.js". In daily operation, I believe many people have doubts about what is jquery.form.js. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts about "what is jquery.form.js?" Next, please follow the editor to study!

Jquery.form.js is a form plug-in that supports ajax form submission and ajax file upload, with references such as "".

This article operating environment: windows7 system, jquery1.6.2 version, DELL G3 computer

What is jquery.form.js?

JQuery.form.js usage

JQuery.form.js is a form plug-in that supports ajax form submission and ajax file upload.

Index submission 1 submission 2 $(function () {$("# ajaxForm") .ajaxForm (function () {alert ("submit successful 1");}) ("# ajaxForm") .submit (function () {$(this) .ajaxSubmit (function () {alert ("submit successfully 1");}); return false;}) ("# btnButton") .click (function () {$("# ajaxForm") .ajaxSubmit (function () {alert ("submit successfully 2");}); return false;}); ajaxForm adds all the necessary event listeners in preparation for ajax to submit the form. AjaxForm does not submit forms. In the ready function of document, use ajaxForm to prepare the ajax submission form. Accept 0 or 1 parameter. The argument can be a callback function or an Options object. $("# formid"). AjaxForm (); ajaxSubmit uses ajax to submit the form Accept 0 or 1 parameter. The argument can be a callback function or an Options object.

("# formid") .ajaxSubmit ()

Or

$("# formid") .submit (function () {

(this) .ajaxSubmit ()

Return false

});

FormSerialize serializes (or serializes) the form into a query string. This method will return a string in the following format: name1=value1&name2=value2. Without $("# formid"). FormSerialize (); fieldSerialize serializes (or serializes) the field elements of the form into a query string. This is convenient when only part of the form fields need to be serialized (or serialized). Returns a string in the following format: name=value1&name2=value2. No $("# formid. SpecialFields") .fieldSerialize (); fieldValue returns the value of the form element that matches the inserted array. This method returns data as an array. If the element value is determined to be invalid, the array is empty. Without $("# formid: password") .fieldValue (); resetForm restores the form to its original state. No $("# formid") .resetForm (); clearForm clears form elements. This method leaves all text, password, and textarea empty, clears the selected in the select element, and resets all radio and checkbox buttons to unselected. No $("# formid") .clearForm (); clearFields clears the field element. It is easy to use when only some form elements need to be cleared. No $("# formid .specialFields") .clearFields ()

Options object

Both ajaxForm and ajaxSubmit support a number of option parameters, which can be provided using an Options object.

The target indicates the elements in the page that are updated by the server's response. The value of an element may be specified as a jQuery selector string, a jquery object, or a DOM element. Default: nullurl specifies the URL to submit the form data. Default: the action attribute value type of the form specifies the method for submitting the form data (method): "GET" or "POST". Default value: the callback function called before the GETbeforeSubmit form is submitted. If the callback function returns the false form will not be submitted. The callback function takes three call parameters: the form data in an array, the jQuery form object, and the Options object passed into the ajaxForm/ajaxSubmit. Default value: the callback function called after the nullsuccess form is successfully submitted. The value of the dataType option then determines whether to return the value of responseText or responseXML. Default value: one of the data types returned by nulldataType: null, "xml", "script" and "json". Default value: nullresetForm indicates whether to reset if the form is submitted successfully. Default value: nullclearForm indicates whether the form data is cleared if the form is submitted successfully.

Var options= {target:'# output', / / put the content returned by the server in the element where id is output beforeSubmit: showRequest, / / callback function before submission: success: showResponse, / / callback function after submission / / url: url, / / default is form's action, if declared, it will override / / type: type, / / default is form's method ("GET" or "POST") If declared, it will override / / dataType: null, / / html (default), xml, script, json accept the type returned by the server / / clearForm: true, / / after successful submission, clear the value of all form elements / / resetForm: true, / / reset the value of all form elements timeout: 3000 / / limit the time of the request, when the request is more than 3 seconds later Pop-out request} function showRequest (formData, jqForm, options) {/ / formData: array object. When submitting the form, the form plug-in will automatically submit these data in ajax format, such as [{name:user,value:val}, {name:pwd,value:pwd}] / / jqForm: jQuery object, encapsulating the element of the form / / options: options object var queryString=$.param (formData) / / name=1&address=2 var formElement=jqForm [0]; / / convert jqForm to DOM object var address=formElement.address.value; / / access jqForm's DOM element return true; / / the form will be submitted as long as it does not return false, where you can validate the form element} function showResponse (responseText,statusText) {/ / dataType=xml var name=$ ("name", responseXML). Text (); var address=$ ("address", responseXML). Text () $("# xmlout") .html (name+ "" + address); / / dataType=json $("# jsonout") .html (data.name+ "" + data.address);} at this point, the study of "what is jquery.form.js" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.