AJAX 实现form表单提交
1.使用Ajax实现异步操作,点击登录按钮后,即触发form表单的提交事件,数据传输至后端
JSP:
<script type="text/javascript" src="resources/js/jquery.js"></script> <script type="text/javascript" src="resources/js/login.js"></script><form id = "form"><table align = "center"><tr><td>用户名</td><td><input type = "text" id = "userName" name = "userName"></td></tr><tr><td>密码</td><td><input type = "password" id = "userPwd" name = "userPwd"></td></tr><tr><td align = "left"><input id = "submitbtn" type = "submit" value = "登录" style = "background-color: Cyan;color:blue"></td><td align = "right" ><button style = "background-color: Cyan;color:blue"><a href = "/SSM/user/toRegister">注册</a></button></td></tr></table></form>
js:
1 $(function(){ 2 $("#submitbtn").click(function(){ 3 login(); 4 }) 5 }) 6 function login(){ 7 var userName = $("#userName").val();//获取userName的值 8 var userPwd = $("#userPwd").val();//获取userPwd的值 9 $.ajax({ 10 url:"user/judgeLogin", 11 type:"POST", 12 data:{"userName":userName,"userPwd":userPwd}, 13 dataType:"json", 14 success:function(returnData){ 15 alert(returnData);16 } 17 })18 }
js另一种传值方法:
1 function login(){ 2 $.ajax({ 3 url:"user/judgeLogin", 4 type:"POST", 5 data:$("#form").serialize(),//表单序列化 6 dataType:"json", 7 success:function(returnData){ 8 alert(returnData); 9 } 10 }) 11 }
Controller层 接收:
1 /** 2 * 登录判断 3 * @param userDto 4 * @return 5 */ 6 @ResponseBody 7 @RequestMapping("/judgeLogin") 8 public String judgeLogin(UserDto userDto) { 9 int k = userService.judgeLogin(userDto); 10 if(k > 0) { 11 return "--登录成功!--"; 12 }else { 13 return "--登录失败!--"; 14 } 15 }
效果展示:
转载于:https://www.cnblogs.com/wydyzcnc/p/8366569.html
AJAX 实现form表单提交相关推荐
- ajax 模拟表单提交,Ajax模拟Form表单提交,含多种数据上传
---恢复内容开始--- Ajax提交表单.使用FormData提交表单数据和上传的文件(这里的后台使用C#获取,你可以使用Java一样获取) 有时候前台的数据提交到后台,不想使用form表单上传,希 ...
- Extjs6关于Ajax和form表单提交以及store请求session超时的处理方法
对于Store的处理 每个store配置的时候,配上load监听,加载时处理: usrStore : {model : 'App.model.Usr',autoLoad : false,proxy : ...
- ajax异步请求——form表单提交 及 表单序列化提交
ajax异步请求 AJAX介绍 AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML),它不是一种新的编程语言,而是一种使用现有标准的新方 ...
- from提交ajax,form表单提交与ajax消息传递
form表单提交与ajax消息传递 1.前后端传输数据编码格式contentType: urlencoded 对应的数据格式:name=xxx&password=666 后端获取数据:requ ...
- java ajax提交form表单提交_form表单AJAX提交(四种方法)
一.AJAX的 form表单提交 1.第一种: 序列化提交$('#form').serialize() 前台: $.ajax({ url: "", type: "post ...
- SSM框架下实现form表单提交的方式
实现form表单的提交有多种方式,这里我们主要讲两种常用的. 注:此Demo是在SSM框架下完成的,数据库采用MySQL,关于ssm整合的相关知识,这里不做过多赘述.主要展示表单提交方式,暂不考虑代码 ...
- python中前后端通信方法Ajax和ORM映射(form表单提交)
后端从数据库获取数据给到前端: 第一种方式: admin.py文件代码: @admin.route('/showList') def show():# 获取数据库所有文章数据,得到一个个对象res=A ...
- form和ajax同时提交吗,form表单提交与ajax消息传递
form表单提交与ajax消息传递 1.前后端传输数据编码格式contentType: urlencoded 对应的数据格式:name=xxx&password=666 后端获取数据:requ ...
- ajax提交,form表单提交,onsubmit=return checksubmit()提交验证
Ajax提交的两种方式: 一是url参数提交数据, 二是form提交(和平常一样在后台可以获取到Form表单的值).在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交 一.Url参数提交数据 ...
最新文章
- Fragment的startActivityForResult详细解决方案
- IBM超越谷歌抵达量子计算里程碑:研制出50量子位计算机
- Spring之面向切面编程AOP(三)
- C++ —— C++数据类型
- Android studio http 代理设置
- zabbix2.4 mysql模板_zabbix自带的模板监控mysql
- python函数控制词典_Python 基础之集合相关操作与函数和字典相关函数
- 【树状数组】Bzoj1878[SDOI2009] HH的项链
- 借助xUnit减少了生产问题
- 1.1 OC类的认识
- 解决Nginx + PHP(FastCGI)遇到的502 Bad Gateway错误[原创]
- 浏览器地址栏中加入ico图标的二种方法
- 人脸识别技术大起底,你了解多少?
- PS插件:灯光工厂安装教程
- 微信java版s40_微信诺基亚下载
- bat脚本_获取管理员权限
- POI 设置Word表格边框、表格文字水平居中
- 【24】NumPy IO
- centos 文件搜索命令
- Windows 7提示数据错误 循环冗余检查怎么办?