zoukankan      html  css  js  c++  java
  • 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请求。

     
     
     
     
  • 相关阅读:
    Python之正则表达式(re模块)
    正则表达式总结
    Python之日志处理(logging模块)
    Python之向日志输出中添加上下文信息
    python之配置日志的几种方式
    OSG3.4内置Examples解析【目录】
    探究osg中的程序设计模式【目录】
    3wwang的2019计划
    《探索未知种族之osg类生物》目录
    探索未知种族之osg类生物---渲染遍历之裁剪三
  • 原文地址:https://www.cnblogs.com/lvchenfeng/p/8011393.html
Copyright © 2011-2022 走看看