Jquery Ajax Submission Form several methods

Submit a Form $get way

The Get () method loads information through a remote HTTP GET request

Format

$ (selector). Get (Url,data,success (RESPONSE,STATUS,XHR), DataType)

Request test.php Web page, transfer 2 parameters, ignore return value:

$.get ("test.php", {name: "John", Time: "2pm"});

Displays the test.php return value (HTML or XML, depending on the return value):

The code is as follows	Copy Code
$.get ("test.php", function (data) { Alert ("Data Loaded:" + data); });

Ajax Serialization Form

$. Form.serialize (Namevaluepair)

Virtual a form, and set the name and value of the form control.

Parameters
Namevaluepair

Required option. Set up a virtual form control. This parameter is in the form of: {name1=value, name2=value2, ...}
return value

The string after the virtual form is serialized, in the form of: username=%e5%95%8a%e8%94%a1&password=123456

The code is as follows

Copy Code

<form> <div><inputtype= "text" Name= "a" value= "1" id= "a"/></div> <div><inputtype= "text" name= "B" value= "2" id= "B"/></div> <div><inputtype= "hidden" name= "C" value= "3" id= "C"/></div> <div> <textareaname= "D" rows= "8" cols= ">4</textarea>" </div> <div><selectname= "E" > <optionvalue= "5" selected= "selected" >5</option> <optionvalue= "6" >6</option> <optionvalue= "7" >7</option> </select></div> <div> <inputtype= "checkbox" Name= "F" value= "8" id= "F"/> </div> <div> <inputtype= "Submit" name= "G" value= "Submit" id= "G"/> </div> </form> The. Serialize () method can manipulate JQuery objects that have selected individual form elements, such as <input&gt, <textarea>, and <select>. But the source sky, the choice <form> label itself to serialize is generally easier: $ (' form '). Submit (function () { Alert ($ (this). Serialize ()); Returnfalse; });

Output standard query string:

A=1&b;=2&c;=3&d;=4&e;=5

submit a form $POST way

$.post

Jquery.post (URL, [data], [callback], [Type]): Asynchronous request using POST method

Parameters:

URL (String): The URL address where the request is sent.

Data (MAP): (optional) The information to be sent to the server, expressed as a Key/value key-value pair.

Callback (function): (optional) the callback function (which is invoked only if the response return state is success) when loading succeeds.

The code is as follows	Copy Code
$.post ("momsg.php", {"Tel": $ ("#username"). Val ()},function (data) { if (data==0)//0 Success 1 unsuccessful 2 phone number format wrong { // } });

Change the text of a DIV element through an AJAX POST request:

The code is as follows	Copy Code
$ ("input"). KeyUp (function () { txt=$ ("Input"). Val (); $.post ("demo_ajax_gethint.asp", {suggest:txt},function (result) { $ ("span"). HTML (result); }); });

Instance

The code is as follows

Copy Code

<script type= "Text/javascript" > function AddData () { var typename=$ ("#<%=this.typename.clientid%>"). Val (); var msg= "Not to be empty"; if (typename== "") { if (msg!= "") { Alert (msg); return false; } } Else { Show progress bar $ ("#loading"). Ajaxstart (function () { $ (this). Show (); }); Events triggered prior to submission $ ("#msg"). Ajaxsend (function (request, settings) {$ (this). Append ("<li>starting request at" + Settings.url + "</ Li> ");          //The Countryid here can be dynamically fetched from the GridView            var countryid= $ ("#<%=this.drpcountry.clientid%>"). Val ();//Get Drop-down menu value           var countryname=format_get_name (Countryid);//Get Drop-down Menu Text           var typeName = $ ("#<%=this.typename.clientid%>"). Val ( )//Get TXT to typename value           var showtypedesc = $ ("#<%= This.showtypedesc.clientid%> "). Val ()///Get txt to Showtypedesc value           //Invoke Juqery Ajax             $.ajax ({            Type: "POST",            URL: "addnews.aspx",             timeout:20000,             error:function () {alert (' Error ');},             data: "countryid=" +countryid+ "&countryname=" +countryname+ "&typename=" +typename+ "& Showtypedesc= "+showtypedesc,            success:function ( msg)            { var text=msg.split (' < '); Add an executed method when the AJAX request fails $ ("#msg"). Ajaxerror (function (request, settings) { $ (this). Append ("<li>error requesting page" + Settings.url + "</li>"); }); Add an executed method when the AJAX request succeeds $ ("#msg"). Ajaxsuccess (function (request, settings) { $ (this). Append (Text[0]); });          //Empty values inside text             $ ("#<%=this.typename.clientid%>"). Val ("");            $ ("#<%=this.showtypedesc.clientid%>"). Val ("");            return false;           }           });      }   }    //Get the text content in the Drop-down menu     function format_get_name (ID)     {         var DRP = $ (' <%=drpCountry.ClientID%> ');         for (var i =0;i<drp.options.length;i++)          {             if (drp.options[ I].value = = ID)             {                  return drp.options[i].text;            }        }         return ";    } </script>