如果不做任何处理,表单提交时会刷新页面,为了改善体验,可以使用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——表单异步提交的更多相关文章

  1. 使用jQuery.form插件,实现完美的表单异步提交

    传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...

  2. 使用jQuery,实现完美的表单异步提交

    jQuery异步提交表单 <form id="form1" method="post"> <table border="1" ...

  3. jquery.form.js 使用以及问题(表单异步提交)

    标注:我引用的js后报错 原因:是引用的js有冲突 我引用了两便jQuery: 转载:https://blog.csdn.net/cplvfx/article/details/80455485 使用方 ...

  4. jquery让form表单异步提交

    1.监听表单提交事件,并阻止表单提交 $("form").submit(function(e) { return false;//阻止表单提交 }) 2.拿到表单内容 let da ...

  5. .net mvc中的表单异步提交

    // // 摘要: // 将 <form> 开始标记写入响应. // // 参数: // ajaxHelper: // AJAX 帮助器. // // actionName: // 将处理 ...

  6. 表单 - Form - EasyUI提供的表单异步提交

    方案一 被提交的表单 <form id="loginForm" method="post"> <table align="cente ...

  7. JS/Jquery 表单方式提交总结

    1. submit提交 (1). submit 按钮式提交 缺点:在提交前不可修改提交的form表单数据 // 1. html <form method="post" act ...

  8. 使用jQuery.form插件,实现完美的表单异步提交

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs ...

  9. asp.net mvc表单异步提交

    html代码: @using (Html.BeginForm("xx", "xx", FormMethod.Post, new { enctype = &quo ...

随机推荐

  1. windows获取文件夹下所有文件名的方法

    方法一:tree命令 TREE——显示磁盘目录结构命令 功能:显示指定驱动器上所有目录路径和这些目录下的所有文件名. 格式:TREE [盘符:][\目录] [/F] [/A] 使用说明:使用/F参数时 ...

  2. php基础语法(控制语句、数组、函数)

    流程控制 if -else if -else语句: switch语句: while循环: do while循环 for循环: 控制脚本执行进度 die(“输出内容”) exit是die的同义词. sl ...

  3. PHP应用的CI/CD流程实践与学习:一、PHP运行环境的准备

    前言:一直以来想学习与实践一下敏捷开发,之前项目虽说口口声声我们项目是敏捷开发,其实很扯. 敏捷开发如果有持续集成.持续部署的支持,那样开发.测试.运维将节省不少精力. 此系列博客只为记录CI/CD的 ...

  4. Docker的一些常用

    日常使用的一些命令 1234567891011121314 docker pull mysql:tags // 拉mysql的tag版本 docker run -it -p(端口映射-主机端口:容器端 ...

  5. 02 - Unit01:服务器返回数据的json处理+搭建项目环境

    服务器返回数据的json处理+搭建项目环境 服务器返回数据的json处理 springMVC JSP响应流程 请求 -->DispatcherServlet -->HandlerMappi ...

  6. 手动下载阿里云Nexus上的Jar包

    手动下载阿里云Nexus上的Jar包 1.1 在任意目录下创建一个文件夹,创建一个pom.xml文件,一个bat批处理脚本,如图: 1.2 DownLoad.bat文件中的内容: call mvn - ...

  7. (OPC Client .NET 开发类库)网上很多网友都有提过,.NET开发OPC Client不外乎下面三种方法

    1. 背景 OPC Data Access 规范是基于COM/DCOM定义的,因此大多数的OPC DA Server和client都是基于C++开发的,因为C++对COM/DCOM有最好的支持.现在, ...

  8. java封装后引用的例子

    封装好的文件: 另外一个文件引用封装文件的方法: 来源: https://www.runoob.com/java/java-encapsulation.html

  9. java代码---charAt()和toCharry()的用法

    总结:charAt()是返回字符型,把字符串拆分成某个字符,返回指定位置的字符.可以把字符串看成char型数组 package com.sads; ///输出一个大写英文字母的 public clas ...

  10. Cassandra 的启动和初始化

    Cassandra常用命令 Cassandra启动过程详解[原创] Cassandra 的入口 CassandraDaemon 作为Cassandra的入口,做了以下几件事: load configu ...