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请求。
jQuery——表单异步提交的更多相关文章
- 使用jQuery.form插件,实现完美的表单异步提交
传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...
- 使用jQuery,实现完美的表单异步提交
jQuery异步提交表单 <form id="form1" method="post"> <table border="1" ...
- jquery.form.js 使用以及问题(表单异步提交)
标注:我引用的js后报错 原因:是引用的js有冲突 我引用了两便jQuery: 转载:https://blog.csdn.net/cplvfx/article/details/80455485 使用方 ...
- jquery让form表单异步提交
1.监听表单提交事件,并阻止表单提交 $("form").submit(function(e) { return false;//阻止表单提交 }) 2.拿到表单内容 let da ...
- .net mvc中的表单异步提交
// // 摘要: // 将 <form> 开始标记写入响应. // // 参数: // ajaxHelper: // AJAX 帮助器. // // actionName: // 将处理 ...
- 表单 - Form - EasyUI提供的表单异步提交
方案一 被提交的表单 <form id="loginForm" method="post"> <table align="cente ...
- JS/Jquery 表单方式提交总结
1. submit提交 (1). submit 按钮式提交 缺点:在提交前不可修改提交的form表单数据 // 1. html <form method="post" act ...
- 使用jQuery.form插件,实现完美的表单异步提交
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs ...
- asp.net mvc表单异步提交
html代码: @using (Html.BeginForm("xx", "xx", FormMethod.Post, new { enctype = &quo ...
随机推荐
- Windows 10 四月更新,文件夹名称也能区分大小写?
Windows 向来是不区分文件和文件夹大小写的,但是从 NTFS 开始却又支持区分文件夹大小写.而 Linux/Mac OS 一向都是区分文件和文件夹大小写的. 本文将推荐 Windows 10 四 ...
- Redis缓存的设计、性能、应用与数据集群同步
Redis缓存的设计.性能.应用与数据集群同步 http://youzhixueyuan.com/design-performance-and-application-of-redis-cache.h ...
- Quartz 2D编程指南(5) - 变换(Transforms)
Quartz 2D 绘制模型定义了两种独立的坐标空间:用户空间(用于表现文档页)和设备空间(用于表现设备的本地分辨率).用户坐标空间用浮点数表示坐标,与设备空间的像素分辨率没有关系.当我们需要一个点或 ...
- python(十一)、线程
一.基本概念 进程是资源分配的基本单位,而线程则是CPU调度和分派的基本单位.系统需要执行创建进程.撤销进程和进程切换等任务,但创建进程开销大限制了并发的提高.因此,成百上千个进程会造成内存浪费,并且 ...
- linux压缩打包等
删除 rm -rf 目录 tar -zcvf /home/xahot.tar.gz /xahot tar -zcvf 打包后生成的文件名全路径 要打包的目录 例子:把/xahot文件夹打包后生成一个/ ...
- java 乐观锁CAS
乐观锁是一种思想,本身代码里并没有lock或synchronized关键字进行修饰.而是采用一种version. 即先从数据库中查询一条记录得到version值,在更新这条记录时在where条件中对这 ...
- FastAdmin 源码分析:jQuery 含逗号的选择器
FastAdmin 源码分析:jQuery 含逗号的选择器 在 FastAdmin 你常常会看到以下 jQuery 选择器的代码. if ($(".datetimepicker", ...
- python2.7 + ubuntu14.4 + dlib19.7
0.首先需要Cmake以及编译C++成python程序的工具 sudo apt-get install libboost-python-dev cmake 1.download dlib19.7 fr ...
- laravel的中间件demo
过滤器已经被废除...刚学才两天,蛋疼 创建一个中间件 ./artisan make:middleware TestMiddleware 大概代码 <?php namespace App\Htt ...
- python稀疏矩阵得到每列最大k项的值,对list内为类对象的排序(scipy.sparse.csr.csr_matrix)
print(train_set.tdm) print(type(train_set.tdm)) 输出得到: (0, 3200) 0.264940780338 (0, 1682) 0.356545827 ...