Jquery.form.js notes

As a result of the project, the need to upload files asynchronously, online search, many are using Jquery.form plug-in, so find information, tune code, do some small notes.

Official information: http://www.malsup.com/jquery/form/

Demo

1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4     <MetaCharSet= "UTF-8">5     <title>File Upload Demo</title>6 </Head>7 <Body>8     <formID= "Up"enctype= "Multipart/form-data">9         <inputtype= "File"name= "image">Ten         <ButtonID= "Doup">GO</Button> One     </form> A     <Scriptsrc= "Jquery.js"></Script> -     <Scriptsrc= "Jquery.form.js"></Script> -     <Script> the     $(function(){ -         $("#doUp"). On ("Click",function(){ - Console.log ($ ( This)); -             $("#up"). Ajaxsubmit ({ + Type:"Post", - URL:"http://target.com", + Success:function(data) { A console.log (data); at                 }, - Error:function(xmlhttprequest,textstatus,errorthrown) { - Console.log (XMLHttpRequest); - Console.log (textstatus); - Console.log (errorthrown); -                 } in             }) -         }) to     }) +     </Script> - </Body> the </HTML>

You need to introduce Jquery.js and jquery.form.js two library files when you use them.

Typically, you use Ajaxsubmit () to submit the data for a form form, and the parameter for this method is an object, as follows

Property	Describe
Url	The AJAX request will be submitted to the URL, which defaults to the form's Action property value
Type	Specifies the method by which the form data is submitted: "GET" or "POST". Default value: The Method property value of the form (if no default is found for "GET").
DataType	The type of data expected to be returned. NULL, "XML", "script", or "JSON" one of them. DataType provides a method that specifies how the server's response is handled. This is directly reflected in the Jquery.httpdata method. The following values are supported: ' XML ': if datatype = = ' xml ', the server response will be treated as XML. Also, if the "success" callback method is specified, the Responsexml value is returned. ' JSON ': if datatype = = ' json ', the server response will be evaluated and passed to the ' success ' callback method if it is specified. ' Script ': if datatype = = ' script ', the server response will be evaluated as plain text. Default value: null (server returns RESPONSETEXT value)
Target	Indicates the element in the page that is updated by the server response. The value of the element may be specified as a jquery selector string, a jquery object, or a DOM element. Default value: null.
Beforesubmit	The callback function that was called before the form was submitted. The "Beforesubmit" callback function is provided as a hook to run the pre-commit logic or to validate the form data. If the "Beforesubmit" callback function returns false, the form will not be committed. The "Beforesubmit" callback function has three invocation parameters: form data in array form, jquery form objects, and options objects in the incoming ajaxform/ajaxsubmit. Default value: null
Success	callback function that is called after the form has been successfully committed. If the "Success" callback function is provided, it is called when the response is returned from the server. The datatype option value is then determined to return the value of ResponseText or Responsexml. Default value: null
ClearForm	Indicates whether the form data is purged if the form submission succeeds. Default value: null
Resetform	Indicates whether the form submission succeeds if it is reset. Default value: null

Alternatively, you can define all actions directly as an object, assigning a variable to the ajaxsubmit (), such as:

1 var options={2   URL: "Http://target",3   type: "POST", 4   success:parse    5}6function  Parse (data) {  7   console.log (data);  // here is the code  for the callback function 8 }9 $ ("#up"). Ajaxsubmit (options);

Jquery.form.js notes