Ajax submit Form

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 Handling Methods

The Form 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

// 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

// Call
$ (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.

Instance download: http://files.cnblogs.com/zjfree/ajaxForm.rar