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表单提交的更多相关文章

  1. Ajax模拟Form表单提交,含多种数据上传

    ---恢复内容开始--- Ajax提交表单.使用FormData提交表单数据和上传的文件(这里的后台使用C#获取,你可以使用Java一样获取) 有时候前台的数据提交到后台,不想使用form表单上传,希 ...

  2. 关于AJAX与form表单提交数据的格式

    一 form表单传输文件的格式: 只有三种: multipart/form-data 一般用于传输文件,图片文件或者其他的. 那么其中我们默认的是application/x-www-form-urle ...

  3. ajax默认form表单提交,导致实体不识别

    出现位置:实体比较复杂,包含List之类的时候 public class AdvertisementType { /// <summary> /// 广告位名称 /// </summ ...

  4. js_ajax模拟form表单提交_多文件上传_支持单个删除

    需求场景: 用一个input type="file"按钮上传多张图片,可多次上传,可单独删除,最后使用ajax模拟form表单提交功能提交到指定方法中: 问题:由于只有一个file ...

  5. Checkbox框全选操作,form表单提交与jquery ajax提交两种处理方式

    //1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...

  6. ajax form表单提交 input file中的文件

    ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...

  7. Form表单提交,Ajax请求,$http请求的区别

    做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...

  8. python中前后端通信方法Ajax和ORM映射(form表单提交)

    后端从数据库获取数据给到前端: 第一种方式: admin.py文件代码: @admin.route('/showList') def show(): # 获取数据库所有文章数据,得到一个个对象 res ...

  9. ajax传递数组、form表单提交对象数组

    在JSP页面开发中,我们常常会用到form表单做数据提交,由于以前一直只是使用form表单提交单个对象,只要表单文本域的name值和接收的对象的属性名一致,那么传值就没有什么问题.不过,在前几天的开发 ...

随机推荐

  1. 【产品】移动应用监控平台调研——bugly&fabric

    产品定位 腾讯bugly和fabric不仅仅是可以帮助运营人员分析用户.优化推广的数据分析平台,也是移动开发者的异常上报平台和应用更新平台.可以同时为公司产品运营和开发人员提供服务. 产品功能 fab ...

  2. Java EE 基本开发流程及数据库连接池 Druid

    一. 公司开发基本流程    a. 了解需求信息(比较模糊)        需求,不是别人告诉你的,是你自己挖掘出来的.        售前工程师(对行业知识了解):编程学不好,但懂点代码,对人的综合 ...

  3. 控制台提示“Invalid string length”的原因

    控制台提示“Invalid string length”,浏览器直接卡掉,是为什么呢? 答:因为在写嵌套循环时,定义的变量重名了,内层和外层用了同一个i变量. -THE END-

  4. React Hook父组件获取子组件的数据/函数

    我们知道在react中,常用props实现子组件数据到父组件的传递,但是父组件调用子组件的功能却不常用.文档上说ref其实不是最佳的选择,但是想着偷懒不学redux,在网上找了很多教程,要不就是hoo ...

  5. MyBatis的ResultMapping和ResultMap

    MyBatis的ResultMapping和ResultMap Effective java 第3版中描述的Builder模式 Java设计模式14:建造者模式 2个类都使用了Builder来构建对象 ...

  6. 【朝花夕拾】Android自定义View篇之(二)Canvas常用功能

    前言 转在请申明,转自[https://www.cnblogs.com/andy-songwei/p/10960012.html],谢谢! 上一篇讲View的绘制流程中讲到过,最后一步是draw流程, ...

  7. Go-内置time包

    一.导入包 import "time" 二.转换成Time对象 获取当前时间:time. Now () 自定义时间:time. Date(year int, month Month ...

  8. CreateWindowW()函数

    函数原型为: 该函数利用已经注册的窗口类 创建一个窗口,并返回该窗口的句柄 HWND CreateWindow( LPCTSTR lpClassName, //窗口类名称,也可以是控件名称 LPCTS ...

  9. 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' 的错误. 解决方法 ...

  10. golang-基础

    1.go的特点 兼具动态语言的开发效率与C,C++,java的性能安全性 ,内置编译器 2.go的安装 go的sdk下载:  https://studygolang.com/dl go的IDE下载: ...