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获取文件夹下所有文件名的方法
方法一:tree命令 TREE——显示磁盘目录结构命令 功能:显示指定驱动器上所有目录路径和这些目录下的所有文件名. 格式:TREE [盘符:][\目录] [/F] [/A] 使用说明:使用/F参数时 ...
- php基础语法(控制语句、数组、函数)
流程控制 if -else if -else语句: switch语句: while循环: do while循环 for循环: 控制脚本执行进度 die(“输出内容”) exit是die的同义词. sl ...
- PHP应用的CI/CD流程实践与学习:一、PHP运行环境的准备
前言:一直以来想学习与实践一下敏捷开发,之前项目虽说口口声声我们项目是敏捷开发,其实很扯. 敏捷开发如果有持续集成.持续部署的支持,那样开发.测试.运维将节省不少精力. 此系列博客只为记录CI/CD的 ...
- Docker的一些常用
日常使用的一些命令 1234567891011121314 docker pull mysql:tags // 拉mysql的tag版本 docker run -it -p(端口映射-主机端口:容器端 ...
- 02 - Unit01:服务器返回数据的json处理+搭建项目环境
服务器返回数据的json处理+搭建项目环境 服务器返回数据的json处理 springMVC JSP响应流程 请求 -->DispatcherServlet -->HandlerMappi ...
- 手动下载阿里云Nexus上的Jar包
手动下载阿里云Nexus上的Jar包 1.1 在任意目录下创建一个文件夹,创建一个pom.xml文件,一个bat批处理脚本,如图: 1.2 DownLoad.bat文件中的内容: call mvn - ...
- (OPC Client .NET 开发类库)网上很多网友都有提过,.NET开发OPC Client不外乎下面三种方法
1. 背景 OPC Data Access 规范是基于COM/DCOM定义的,因此大多数的OPC DA Server和client都是基于C++开发的,因为C++对COM/DCOM有最好的支持.现在, ...
- java封装后引用的例子
封装好的文件: 另外一个文件引用封装文件的方法: 来源: https://www.runoob.com/java/java-encapsulation.html
- java代码---charAt()和toCharry()的用法
总结:charAt()是返回字符型,把字符串拆分成某个字符,返回指定位置的字符.可以把字符串看成char型数组 package com.sads; ///输出一个大写英文字母的 public clas ...
- Cassandra 的启动和初始化
Cassandra常用命令 Cassandra启动过程详解[原创] Cassandra 的入口 CassandraDaemon 作为Cassandra的入口,做了以下几件事: load configu ...