How to implement Jquery Custom No Refresh submission form Form based on Ajax method
This article focuses on "how to implement Jquery based on Ajax method custom no refresh submission form Form", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "how to implement Jquery custom non-refresh submission form Form based on Ajax method"!
The specific implementation methods are as follows:
The $.ajax method of Jquery can implement ajax calls by setting url,post, parameters, and so on.
If you need to write a lot of code to commit an existing Form, why not just transfer the Form submission directly to the ajax.
Previous processing methods:
For example, Form code is as follows:
The copy code is as follows:
Name:
Password:
Mobile phone:
Description:
When submitted, it jumps to the action.aspx page. And you can get the value through Request.Params ["name"].
Think about:
If you do not want to refresh the page to use ajax, you have to specify url in $. Ajax, and other information, which is difficult to maintain.
I looked it up on the Internet and found that foreigners had a solution long ago. Use ajax to submit directly according to the Form information. The page is not refreshed.
Reference: http://jquery.malsup.com/form/
It's easy to use, but I'd rather write one for my own use.
Core JS code:
The copy code is as follows:
/ / convert form to AJAX submission
Function ajaxSubmit (frm, fn) {
Var dataPara = getFormJson (frm)
$.ajax ({
Url: frm.action
Type: frm.method
Data: dataPara
Success: fn
});
}
/ / convert the values in form to key-value pairs.
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 handler function after a successful call to ajax.
Pass form's action to ajax's url,form 's method to ajax's type, and then pass the formatted form content to data.
The getFormJson method converts the elements of form into json-formatted key-value pairs. Such as: {name:'aaa',password:'tttt'}, pay attention to put the same name in an array.
Call:
The copy 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, and you can add your own call return post-processing code at alert (data).
At this point, I believe you have a deeper understanding of "how to implement Jquery custom non-refresh submission form Form based on Ajax method". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
