使用ajax方法实现form表单的提交
作者:13
GitHub:https://github.com/ZHENFENG13
版权声明:本文为原创文章,未经允许不得转载。
写在前面的话
在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说想要将控制权放在前端,通过js来操作页面的跳转或者数据变化。
一般这种异步的操作,我们都会想到ajax方式,因此在实现了功能后就整理了这篇文章,通过ajax方法实现form表单的提交并进行后续的异步操作。
常见的form表单提交方式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>login test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="login test">
</head>
<body>
<div id="form-div">
<form id="form1" action="/users/login" method="post">
<p>用户名:<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
<p>密 码:<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
<p><input type="submit" value="登录"> <input type="reset" value="重置"></p>
</form>
</div>
</body>
</html>
点击登录按钮后,即触发form表单的提交事件,数据传输至后端,由后端控制页面跳转和数据。
ajax实现form提交方式
修改完成后代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>login test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="ajax方式">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
function login() {
$.ajax({
//几个参数需要注意一下
type: "POST",//方法类型
dataType: "json",//预期服务器返回的数据类型
url: "/users/login" ,//url
data: $('#form1').serialize(),
success: function (result) {
console.log(result);//打印服务端返回的数据(调试用)
if (result.resultCode == 200) {
alert("SUCCESS");
}
;
},
error : function() {
alert("异常!");
}
});
}
</script>
</head>
<body>
<div id="form-div">
<form id="form1" onsubmit="return false" action="##" method="post">
<p>用户名:<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
<p>密 码:<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
<p><input type="button" value="登录" onclick="login()"> <input type="reset" value="重置"></p>
</form>
</div>
</body>
</html>
注意事项
- 在常用方式中,点击的登录按钮的type为"submit"类型;
- 在常用方式中,form的action不为空;
- ajax方式中需要注意的是$.ajax方法中的参数:dataType和data。
我平时很少写前端代码,级别也就是入门级别,能看懂能改而已,所以很多时候都是百度,像这次这个功能的实现也是借助了百度,但是,我百度到的代码在$.ajax方法中设置的dataType参数值为"html"而不是"json",导致我在一开始调试的时候一直报错,最终是改成了"json"才成功,因此在这里特别说明并提醒一下,别和我一样走错了路,还有就是向服务端传输的data值了,像上面代码一样,将form表单中的数据序列化传输即可。
结语
推荐一下自己的达人课,感兴趣的朋友可以看一下:SSM搭建精美实用的管理系统
首发于我的个人博客,新的项目演示地址:perfect-ssm,用户名:admin,密码:123456。
如果有问题或者有一些好的创意,欢迎给我留言,也感谢向我指出项目中存在问题的朋友。
如果你想继续了解该项目可以查看整个系列文章Spring+SpringMVC+MyBatis+easyUI整合系列文章,也可以到我的GitHub仓库或者开源中国代码仓库中查看源码及项目文档。
使用ajax方法实现form表单的提交的更多相关文章
- 使用ajax方法实现form表单的提交(附源码)
写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...
- 利用 ajax自定义Form表单的提交方式
需求场景:有时候单纯的form表单无法向后端传递额外的参数 比如需要action传递js异步生成的参数 ,form表单默认的action就无法满足需求,这时就需要我们自定义form表单的提交方式. h ...
- 基于form表单submit提交不跳转
方法一:target <html> <body> <form action="" method="post" target=&qu ...
- form表单的提交方式
开发中表单提交是很常见的,表单的提交方式也多种方式. 1.使用submit按钮提交表单 <input type="submit"/> <!DOCTYPE htm ...
- JavaWeb学习总结(十一):Session解决form表单重复提交
在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提 ...
- JavaScript 创建一个 form 表单并提交
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- form表单js提交
form表单js提交 $('#form1').submit(); 延迟form表单提交 function submitcheck() { $('#light').css('display', ...
- 微信自带浏览器不支持form表单post提交方案解决
微信自带浏览器form表单post提交,Java控制后台获取不到值得解决方案: 第一种:把post改成get请求,但是改后另一个问题来了就是,数据不安全了,连接上都能看到,导致数据会流失,Java ...
- jqPaginator分页(ajax用法和form表单提交用法)
一般使用方法 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...
随机推荐
- Python笔记(十四):操作excel openpyxl模块
(一) 常遇到的情况 就我自己来说,常遇到的情况可能就下面几种: 读取excel整个sheet页的数据. 读取指定行.列的数据 往一个空白的excel文档写数据 往一个已经有数据的excel文档追加 ...
- MSSQL清理所有用户数据库日志(SQLSERVER2008)
USE [master]; SET NOCOUNT ON; )=''; )=''; DECLARE @clearSql VARCHAR(MAX)=''; ; ,),TMP_WHILE_FLAG, T. ...
- 万能Makefile,前戏做足项目做起来才顺畅。
# 获取要编译的源码 SRC :=$(wildcard *.cpp) OBJ :=$(patsubst %.cpp,%.o,$(SRC)) # 编译参数 CC :=g++ STD :=-std=c++ ...
- EntityFramework Code-First 简易教程(七)-------领域类配置之Fluent API
Fluent API配置: 前面我们已经了解到使用DataAnotations特性来覆写Code-First默认约定,现在我们来学习Fluent API. Fluent API是另一种配置领域类的方法 ...
- iOS 多线程之GCD的简单使用
在iOS开发中,遇到耗时操作,我们经常用到多线程技术.Grand Central Dispatch (GCD)是Apple开发的一个多核编程的解决方法,只需定义想要执行的任务,然后添加到适当的调度队列 ...
- myeclipse编写servlet
1.File--New--Other.搜索web--Dynamic Web Project--Next,Project name--Next,Next--web应用的根目录和web资源存放的目录--- ...
- 【待完成】[MapReduce_9] MapReduce 的 Shuffle 机制
0. 说明 待补充...
- Centos7使用Docker安装Gogs搭建git服务器
gihub地址:https://github.com/gogs/gogs gogs官网:https://gogs.io/ gihub官方docker安装gogs方法:https://github.co ...
- Linux初学 - Centos7忘记root密码的解决办法
开机进入启动界面后,要按照屏幕的下方的操作提示迅速按下“e”键. 按下“e”键后即来到启动文件界面,这时按键盘上面的方向键“下”,一直到文件底部,在"LANG=zh_cn.UTF-8&quo ...
- 6.3Pytyhon文件的操作(三)
目录 目录 前言 (一)文件的创建 (二)文件的删除 (三)文件的重命名 (四)文件的查看 (五)文件的复制 ==1.小文件的复制== ==2.大文件的复制== (六)文件的实战案例 ==1.文件的分 ...