Jquery uses the Ajax method to customize a Form without any need to submit a new Form, jqueryajax

Jquery uses the Ajax method to customize a Form without any need to submit a new Form, jqueryajax

This document describes Jquery's Ajax-based method to customize a Form without refreshing new submissions. Share it with you for your reference. The specific implementation method is as follows:

The $. ajax method of Jquery can be called by ajax. You need to set url, post, parameters, and so on.

If you need to write a lot of code to submit an existing Form, why not directly transfer the Form submission to ajax.

Previous solutions:

The Form code is as follows:
Copy codeThe Code is as follows: <form id = "Form1" action = "action. aspx" method = "post">
Name: <input name = "name" type = "text"/> <br/>
Password: <input name = "password" type = "password"/> <br/>
Mobile Phone: <input name = "mobile" type = "text"/> <br/>
Note: <input name = "memo" type = "text"/> <br/>
<Input type = "submit" value = "submit"/>
</Form>

After submission, the action. aspx page is displayed. You can obtain the value through Request. Params ["name.

Thoughts:

If you do not want to refresh the page using ajax, You need to specify the url and other information in $. ajax, which is not easy to maintain.

I checked on the Internet, and foreigners had a solution before. Use ajax to directly submit data based on Form information. Do not refresh the page.

References: http://jquery.malsup.com/form/

It is easy to use, but I still want to write my own.

Core JS Code:
Copy codeThe Code is as follows: // convert form to AJAX for submission
Function ajaxSubmit (frm, fn ){
Var dataPara = getFormJson (frm );
$. Ajax ({
Url: frm. action,
Type: frm. method,
Data: dataPara,
Success: fn
});
}

// Convert the value in form to a key-value pair.
Function getFormJson (frm ){
Var o = {};
Var a = $ (frm). serializeArray ();
$. Each (a, function (){
If (o [this. name]! = Undefined ){
If (! O [this. name]. push ){
O [this. name] = [o [this. name];
}
O [this. name]. push (this. value | '');
} Else {
O [this. name] = this. value | '';
}
});

Return o;
}

The first parameter of the ajaxSubmit method is the form to be submitted, and the second parameter is the processing function after the ajax call is successful.

Pass the form action to the ajax url, the form method to the ajax type, and then pass the formatted form content to the data.

The getFormJson method converts form elements into json-format key-value pairs. For example, {name: 'aaa', password: 'ttttt'}. Put the same name in an array.

Call:
Copy codeThe Code is as follows: $ (document). ready (function (){
$ ('# Form1'). bind ('submit ', function (){
AjaxSubmit (this, function (data ){
Alert (data );
});
Return false;
});
});

Before calling the ajaxSubmit method, you can verify that the data is correct. In alert (data), you can add your own call to the returned post-processing code.

After calling the ajaxSubmit method, you must add the return false statement to prevent the Form from being actually submitted.

I hope this article will help you with Ajax programming.