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