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请求。