JQuery Ajax Submit Form form instance (with demo source) _jquery

This example describes the method for jquery Ajax to submit form forms. Share to everyone for your reference, specific as follows:

The $.ajax method of jquery can implement Ajax calls, 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's submission directly to Ajax?

Previous methods of processing

If 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: <input name= "mobile" type= "text"/> <br/>
Description: <input name= "Memo" type= "text"/><br/> <input type= "Submit" value=
"submitted"/>< C7/></form>

When committed, jumps to the Action.aspx page. The value can be fetched by request.params["name".

Thinking

If you do not want to refresh the page using Ajax, you have to specify the URL in the $.ajax, such as information, bad maintenance.

Check on the Internet, a long time ago foreigners have a solution. Use Ajax to submit directly according to form information. Do not refresh the page.

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

Very good, but I would like to write their own use.

Core JS Code

Convert form to Ajax commit
function ajaxsubmit (frm, fn) {
  var Datapara = Getformjson (frm);
  $.ajax ({
    url:frm.action,
    Type:frm.method,
    Data:datapara,
    success:fn
  });
Converts the value in a 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 successful Ajax call.

Passing the form's action to the Ajax Url,form method is passed to the Ajax type, and the formatted form content is passed to data.

The Getformjson method converts the elements of a form into JSON-formatted key-value pairs. In the form of: {name: ' AAA ', Password: ' tttt '}, notice to place the same name in an array.

Call

Call
$ (document). Ready (function () {
  $ (' #Form1 '). Bind (' Submit ', function () {
    ajaxsubmit (this, function ( Data) {
      alert (data);
    });
    return false;
  });

Before the Ajaxsubmit method call, you can verify that the data is correct and that you can add your own call back to the processing code at alert (data).

After calling the Ajaxsubmit method, you must add a return false statement to prevent the form from being submitted truthfully.

Full instance code click here to download the site.

More interested readers of jquery-related content can view the site's topics: A summary of Ajax usage in jquery, a summary of jquery table (table) operations tips, a summary of jquery drag-and-drop effects and techniques, a summary of jquery extension techniques, jquery Common Classic Effects Summary "jquery animation and special effects usage Summary", "jquery selector usage Summary" and "jquery common Plug-ins and Usage summary"

I hope this article will help you with the jquery program design.