jQuery——表单异步提交

Posted 2020-10-17 绿尘枫

如果不做任何处理，表单提交时会刷新页面，为了改善体验，可以使用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请求。