标签：url span sea form 后端 请求 title als ace
如果不做任何处理，表单提交时会刷新页面，为了改善体验，可以使用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请求。
标签：url span sea form 后端 请求 title als ace
原文地址：http://www.cnblogs.com/lvchenfeng/p/8011393.html
