In Jquery, there are several ajax Forms Submission methods (get and post), and jqueryajax

In Jquery, there are several ajax Forms Submission methods (get and post), and jqueryajax

In jquery, ajax submits forms in the post and get modes. When using the get method, we can directly use ajax to serialize the form $ (Form ID) serialize, the following describes two methods for submitting form data. $ Get method: The get () method is submitted through remote HTTP. The following describes two methods for submitting form data.

$ Get form submission

The get () method loads information through a remote http get request.

Format

$(selector).get(url,data,success(response,status,xhr),dataType)

Send two parameters to the test. php webpage and ignore the returned value:

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

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

$.get("test.php", function(data){ alert("Data Loaded: " + data);});

Ajax serialized form

$.Form.serialize( NameValuePair )

Virtualize a form and set the Form Control name and value.

Parameters

NameValuePair

Required. Set a virtual form control. The parameter format is {name1 = value, name2 = value2 ,......}

Return Value

The serialized string of the virtual form in the format of username = % E5 % 95% 8A % E8 % 94% A1 & password = 123456.

<Form> <div> <inputtype = "text" name = "a" value = "1" id = "a"/> </div> <inputtype =" text "name =" B "value =" 2 "id =" B "/> </div> <inputtype =" hidden "name =" c "value =" 3 "id =" c "/> </div> <textareaname =" d "rows =" 8 "cols =" 40 "> 4 </textarea> </ div> <selectname = "e"> <optionvalue = "5" selected = "selected"> 5 </option> <optionvalue = "6"> 6 </option> <optionvalue = "7"> 7 </option> </select> </div> <inputtype = "checkbox" n Ame = "f" value = "8" id = "f"/> </div> <inputtype = "submit" name = "g" value = "Submit" id = "g"/> </div> </form>. the serialize () method can operate jQuery objects that have selected individual form elements, such as <input>, <textarea>, and <select>. However, in the source code sky, it is easier to select the <form> label itself for serialization: $ ('form '). submit (function () {alert ($ (this ). serialize (); returnfalse ;});

Output standard query string:

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

$ POST form submission

$. Post

JQuery. post (url, [data], [callback], [type]): Use the POST method for asynchronous requests.

Parameters:

Url (String): the URL of the request.
Data (Map): (optional) data to be sent to the server, expressed in Key/value pairs.
Callback (Function): (optional) callback Function when the load is successful (this method is called only when the Response returns success ).

$. Post ("momsg. php ", {" tel ": $ (" # username "). val ()}, function (data) {if (data = 0) // 0 successful 1 unsuccessful 2 incorrect Mobile Phone Number Format {//}});

Use ajax post to change the text of the div element:

$("input").keyup(function(){ txt=$("input").val(); $.post("demo_ajax_gethint.asp",{suggest:txt},function(result){  $("span").html(result); });});

Instance

<Script type = "text/javascript"> function adddata () {var typeName = $ ("# <% = this. typeName. clientID %> "). val (); var msg = "not be empty"; if (typeName = "") {if (msg! = "") {Alert (msg); return false ;}} else {// display progress bar $ ("# loading "). ajaxStart (function () {$ (this ). show () ;}); // events triggered before submission $ ("# msg "). ajaxSend (function (request, settings) {$ (this ). append ("<li> Starting request at" + settings. url + "</li>") ;}); // The countryid here can Dynamically Retrieve var countryid =$ ("# <% = this. drpCountry. clientID %> "). val (); // get the drop-down menu value var countryname = format_get_name (countryid); // get the drop-down menu text var typeName = $ ("# <% = this. typeName. clientID %> "). val (); // obtain the value var showTypeDesc =$ ("# <% = this. showTypeDesc. clientID %> "). val (); // obtain the value of txt as showTypeDesc // call 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 is successful $ ("# msg "). ajaxSuccess (function (request, settings) {$ (this ). append (text [0]) ;}); // clear the value $ ("# <%= this. typeName. clientID %> "). val (""); $ ("# <% = this. showTypeDesc. clientID %> "). val (""); return false ;}}) ;}// obtain the text 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>

The above content is the several ajax submission forms (get and post) methods in Jquery shared with you by the help house editor, hoping to help you.