Detailed comparison between the url submitted by ajax and the form submitted by ajax

Source: Internet
Author: User

1: ajax constructs a url by itself. In this way, passing parameters must use Data and cannot be used for form submission.
Example:
Copy codeThe Code is as follows:
Function createHtml (id ){
$ ("# Reloading"). show ();
// Edit_bg is a div that is displayed when submitted, so that the background page cannot be operated.
$ ("# Edit_bg"). show ();
$. Ajax ({
Type: "POST ",
Url: "pageAction! CreateHtml. action ",
Data: "id =" + id,
Success: function (data ){
$ ("# Reloading"). hide ();
$ ("# Edit_bg"). hide ();
If (data = "true "){
Alert ("operation successful. ");
} Else {
Alert ("operation failed. Please contact the administrator! ");
}
} // Actions after successful operations
});
}

2: ajax submits a form, which is very useful for big data transmission, such as user registration, a large amount of information, submit a form using ajax, the page is more beautiful, but for ajax submits a form, we have to introduce a js, that is, jquery. form. js"
Example:
Copy codeThe Code is as follows:
Function uploadFile (){

$ ("# Reloading"). show ();
$ ("# Edit_bg"). show ();
// Form1 is the form name
$ ("# Form1"). ajaxSubmit ({
Type: "POST ",
Success: function (data ){
$ ("# Reloading"). hide ();
$ ("# Edit_bg"). hide ();
If (data. indexOf ("true ")! =-1 ){
Alert ("operation successful. ");
} Else {
Alert (data );
Alert ("operation failed. Please contact the administrator! ");
}
} // Actions after successful operations
});
}

3: although the two ajax submission forms can be correctly operated, the returned data is incorrect and the page cannot be processed. The following code corrects the ajax submission form:
Copy codeThe Code is as follows:
Function submitForm (){
$ ('# Form1'). ajaxSubmit (ajaxOptionsNew );
}

Var ajaxOptionsNew = {
BeforeSubmit: fn_check_form,
Success: showResponse,
Url: "costAtion! Save2.action ",
Error: function (XMLResponse ){
Alert (XMLResponse. responseText );
Alert ('Operation failed! ');
// Window. location. reload ();
}
};

 

Function fn_check_form (){
If ($ ("# Name"). val () = ""){
Alert ("cannot be blank ");
$ ("# Name"). focus ();
Return false;
}
}

Function showResponse (responseText ){
Try {
// Alert (responseText );
If (responseText = 'true '){
Alert ('Operation successful! ');
Window. location. reload ();
}
Else if (responseText = 'paramfalse ')
{
Alert ("required parameter cannot be blank! ")
}
Else if (responseText = 'timeerror ')
{
Alert ("the departure time cannot be later than the reimbursement time! ");
}
Else {
Alert ('Operation failed! ');
// Window. location. reload ();
}
} Catch (e) {alert (e. message );}
}

Related Article

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.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.