jquery--form Asynchronous Commit

If no processing is done, the page is refreshed when the form commits, and in order to improve the experience, you can use jquery to submit the form asynchronously: through $ ("#form"). Serialize () Converts the data of a form element into a string and then passes the $.ajax () Executes an asynchronous request resource.

Page code:

<formMothod= "POST"ID= "Search_form"> 　　 <Divclass= "CF">    　　 <labelclass= "Search-bar">       　　 <inputID= "keyword"placeholder= "Please enter search keywords"name= "User_info_keyword"type= "text"value=""class= "Input-search">       　　 <aID= "Search"class= "Btn-search"><Iclass= "Icon-search"></I></a>      　　 <ahref= "javascript:;"class= "Btn-more"></a>      </label> 　　 </Div></form>

jquery Code:

JQuery (document). Ready (function() {JQuery (' #search_form '). Bind ("Submit",function(){         varKey_word = JQuery ("#keyword"). Val (); if(Key_word = = "") {return false; } varOptions ={URL:'/portrait/user_info_display?user_info_keyword= ' +Key_word, type:' Post ', DataType:' Text ', Data: $ ("#search_form"). Serialize (), Success:function(data) {if(Data.length > 0) JQuery ("#user_info"). HTML (data);         }         };         $.ajax (options); return false; })   $(' #search '). Click (function(){        $(' #search_form '). Submit (); })});

The code completes two functions: 1. Press ENTER after entering a keyword, a POST request is sent to the server, the form is submitted asynchronously, and a portion of the page is refreshed; 2. After you enter a keyword, click the query button, or you can refresh some of the pages asynchronously.

Note that a POST request is sent after the form is submitted, and the Click button sends a GET request, so we can use jquery to make the button click on the post to submit, so the backend does not have to write the code to process the GET request.

jquery--form Asynchronous Commit