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:
$(function(){
$("#submitbtn").click(function(){
login();
})
})
function login(){
var userName = $("#userName").val();//获取userName的值
var userPwd = $("#userPwd").val();//获取userPwd的值
$.ajax({
url:"user/judgeLogin",
type:"POST",
data:{"userName":userName,"userPwd":userPwd},
dataType:"json",
success:function(returnData){
alert(returnData);
}
})
}
js另一种传值方法:
function login(){
$.ajax({
url:"user/judgeLogin",
type:"POST",
data:$("#form").serialize(),//表单序列化
dataType:"json",
success:function(returnData){
alert(returnData);
}
})
}
Controller层 接收:
/**
* 登录判断
* @param userDto
* @return
*/
@ResponseBody
@RequestMapping("/judgeLogin")
public String judgeLogin(UserDto userDto) {
int k = userService.judgeLogin(userDto);
if(k > 0) {
return "--登录成功!--";
}else {
return "--登录失败!--";
}
}
效果展示:
AJAX 实现form表单提交的更多相关文章
- Ajax模拟Form表单提交,含多种数据上传
---恢复内容开始--- Ajax提交表单.使用FormData提交表单数据和上传的文件(这里的后台使用C#获取,你可以使用Java一样获取) 有时候前台的数据提交到后台,不想使用form表单上传,希 ...
- 关于AJAX与form表单提交数据的格式
一 form表单传输文件的格式: 只有三种: multipart/form-data 一般用于传输文件,图片文件或者其他的. 那么其中我们默认的是application/x-www-form-urle ...
- ajax默认form表单提交,导致实体不识别
出现位置:实体比较复杂,包含List之类的时候 public class AdvertisementType { /// <summary> /// 广告位名称 /// </summ ...
- js_ajax模拟form表单提交_多文件上传_支持单个删除
需求场景: 用一个input type="file"按钮上传多张图片,可多次上传,可单独删除,最后使用ajax模拟form表单提交功能提交到指定方法中: 问题:由于只有一个file ...
- Checkbox框全选操作,form表单提交与jquery ajax提交两种处理方式
//1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...
- ajax form表单提交 input file中的文件
ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...
- Form表单提交,Ajax请求,$http请求的区别
做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...
- python中前后端通信方法Ajax和ORM映射(form表单提交)
后端从数据库获取数据给到前端: 第一种方式: admin.py文件代码: @admin.route('/showList') def show(): # 获取数据库所有文章数据,得到一个个对象 res ...
- ajax传递数组、form表单提交对象数组
在JSP页面开发中,我们常常会用到form表单做数据提交,由于以前一直只是使用form表单提交单个对象,只要表单文本域的name值和接收的对象的属性名一致,那么传值就没有什么问题.不过,在前几天的开发 ...
随机推荐
- 【产品】移动应用监控平台调研——bugly&fabric
产品定位 腾讯bugly和fabric不仅仅是可以帮助运营人员分析用户.优化推广的数据分析平台,也是移动开发者的异常上报平台和应用更新平台.可以同时为公司产品运营和开发人员提供服务. 产品功能 fab ...
- Java EE 基本开发流程及数据库连接池 Druid
一. 公司开发基本流程 a. 了解需求信息(比较模糊) 需求,不是别人告诉你的,是你自己挖掘出来的. 售前工程师(对行业知识了解):编程学不好,但懂点代码,对人的综合 ...
- 控制台提示“Invalid string length”的原因
控制台提示“Invalid string length”,浏览器直接卡掉,是为什么呢? 答:因为在写嵌套循环时,定义的变量重名了,内层和外层用了同一个i变量. -THE END-
- React Hook父组件获取子组件的数据/函数
我们知道在react中,常用props实现子组件数据到父组件的传递,但是父组件调用子组件的功能却不常用.文档上说ref其实不是最佳的选择,但是想着偷懒不学redux,在网上找了很多教程,要不就是hoo ...
- MyBatis的ResultMapping和ResultMap
MyBatis的ResultMapping和ResultMap Effective java 第3版中描述的Builder模式 Java设计模式14:建造者模式 2个类都使用了Builder来构建对象 ...
- 【朝花夕拾】Android自定义View篇之(二)Canvas常用功能
前言 转在请申明,转自[https://www.cnblogs.com/andy-songwei/p/10960012.html],谢谢! 上一篇讲View的绘制流程中讲到过,最后一步是draw流程, ...
- Go-内置time包
一.导入包 import "time" 二.转换成Time对象 获取当前时间:time. Now () 自定义时间:time. Date(year int, month Month ...
- CreateWindowW()函数
函数原型为: 该函数利用已经注册的窗口类 创建一个窗口,并返回该窗口的句柄 HWND CreateWindow( LPCTSTR lpClassName, //窗口类名称,也可以是控件名称 LPCTS ...
- Git错误:error:failed to push some refs to 'git@gitee.com:name/project.git'
大家在通过本地仓库上传文件到远程仓库时,会报出 error:failed to push some refs to 'git@gitee.com:name/project.git' 的错误. 解决方法 ...
- golang-基础
1.go的特点 兼具动态语言的开发效率与C,C++,java的性能安全性 ,内置编译器 2.go的安装 go的sdk下载: https://studygolang.com/dl go的IDE下载: ...