jQuery——表單異步提交

如果不做任何處理，表單提交時會刷新頁面，為了改善體驗，可以使用jQuery做到異步提交表單：通過$("#form").serialize()將表單元素的數據轉化為字符串，然后通過$.ajax()執行異步請求資源。

網頁代碼：

<form mothod="POST" id="search_form">
　　<div class="cf">
   　　<label class="search-bar">
      　　<input id="keyword" placeholder="請輸入搜索關鍵詞" name="user_info_keyword" type="text" value="" class="input-search">
      　　<a id="search" class="btn-search"><i class="icon-search"></i></a>
      　　<a href="javascript:;" class="btn-more"></a>
      </label>
　　</div>
</form>

jQuery代碼：

jQuery(document).ready(function (){
   jQuery('#search_form').bind("submit", function(){
         var key_word = jQuery("#keyword").val();
         if(key_word == ""){ return false; }

         var options = {
                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();
   })
});

代碼完成了兩個功能：1.輸入關鍵詞后按回車，會向server發送一個POST請求，然后異步提交表單，刷新部分頁面；2.輸入關鍵詞后，點擊查詢按鈕，也可異步刷新部分頁面。

此時要注意表單提交后發送的是POST請求，而點擊按鈕會發送一個GET請求，所以我們可以通過jQuery，使得按鈕點擊時觸發表單提交，這樣后端就不用再寫代碼處理GET請求。