码迷,mamicode.com
首页 > Web开发 > 详细

jQuery——表单异步提交

时间:2017-12-09 14:58:31      阅读:298      评论:0      收藏:0      [点我收藏+]

标签: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请求。

jQuery——表单异步提交

标签:url   span   sea   form   后端   请求   title   als   ace   

原文地址:http://www.cnblogs.com/lvchenfeng/p/8011393.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!