/**WS Platform Rental Construction (Enterprise q:185 198 884)
- Background
Recently in the work, you need to implement the web-side image upload to the FTP server function. Uploading a file is to use form form to submit data to the background to transfer the file stream, there is a problem: the background after processing the image upload function, the need to send back to the foreground whether to upload a successful status code, upload failed error message and upload a successful image URL. However, there is no way to implement a callback function if you submit it with a normal form form. Later, under the introduction of the small partners, it was found that the Ajaxsubmit () method could be used to implement this function.
- Introduction to the Ajaxsubmit () method
(1) ajaxsubmit () dependent
Ajaxsubmit () method is the jquery form form plug-in method, in order to use the plug-in, you can go directly to the official website http://jquery.malsup.com/form/download. When you use it, you need to introduce a jquery library and a form plugin on a JSP or HTML page.
(2) Introduction to Ajaxsubmit () usage
The Ajaxsubmit () method accepts 0 or 1 parameters, which can be either a callback function or an options object when it is a single parameter. callback function is relatively simple, the following main introduction to the use of options. The options object can set the following parameters:
?
1
2
3
4
5
6
7
8
9
10
11
var options = {
Target: ' #output1 ',//Put the contents returned by the server into an element with ID OUTPUT1
Beforesubmit:showrequest,//Pre-commit callback function
Success:showresponse,//post-commit callback function
Url:url,//default is the action of form, and if declared, overrides
Type:type,//default is the method of form, and if declared, overrides
Datatype:json,//Accept the type returned by the server
Clearform:true,//After successful commit, clears the values of all form elements
Resetform:true,//After successful commit, resets the values of all form elements
timeout:3000//Limit the request time, when the request is greater than 3 seconds, jump out of the request
};
In these parameters, the more commonly used is the pre-commit callback function Beforesubmit and the post-commit callback function success. Beforesubmit is primarily used to validate data before submitting a form. Example code:
?
1
2
3
4
5
6
7
8
function Validate (FormData, Jqform, options) {
/
In this case, the form elements need to be validated, and if the rules are not met,
Returns false directly to prevent form submission.
/
var queryString = $.param (FormData); Assembly data
return true;
}
This callback function has three parameters, Formdata is an array object, Jqform is a jquery object that encapsulates the elements of the form, and the options parameter is the Options object. In this callback function, the form will be allowed to commit as long as it does not return false, and if false, it will prevent the form from being submitted.
Success is the post-commit callback function, with 4 parameters responsetext,statustext,xhr, and $form. Among them, the more commonly used is the first two. StatusText is just a return state, such as Success,error. ResponseText carries the data content returned by the server, which returns the content in the appropriate format based on the DataType property in the Options object you set.
- Ajaxsubmit () Method code example
The following is a template used by the Ajaxsubmit () method.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21st
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
$ (function () {
var options = {
Type: ' POST ',
URL: ' Commit path ',
Success:showresponse,
DataType: ' JSON ',
Error:function (XHR, status, err) {
Alert ("Operation failed");
}
};
$ ("# #Form名称"). Submit (function () {
$ (this). Ajaxsubmit (options);
return false; Prevent forms from being automatically submitted
});
});
/**
- Save operation
*/
function Tosave () {
$ ("#Form名称"). Submit ();
}
/**
- After saving, execute callback
- @param responsetext
- @param statustext
- @param xhr
- @param $form
*/
function Showresponse (responsetext, StatusText, XHR, $form) {
if (responsetext.status = = "0") {
/**
- Action after a successful request
*/
alert (responsetext.msg);
} else {
alert (responsetext.msg);
}
}
Using the Ajaxsubmit () method to realize the callback function when the platform is rented form to submit form