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表单提交相关推荐

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

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

  2. Extjs6关于Ajax和form表单提交以及store请求session超时的处理方法

    对于Store的处理 每个store配置的时候,配上load监听,加载时处理: usrStore : {model : 'App.model.Usr',autoLoad : false,proxy : ...

  3. ajax异步请求——form表单提交 及 表单序列化提交

    ajax异步请求 AJAX介绍 AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML),它不是一种新的编程语言,而是一种使用现有标准的新方 ...

  4. from提交ajax,form表单提交与ajax消息传递

    form表单提交与ajax消息传递 1.前后端传输数据编码格式contentType: urlencoded 对应的数据格式:name=xxx&password=666 后端获取数据:requ ...

  5. java ajax提交form表单提交_form表单AJAX提交(四种方法)

    一.AJAX的 form表单提交 1.第一种: 序列化提交$('#form').serialize() 前台: $.ajax({ url: "", type: "post ...

  6. SSM框架下实现form表单提交的方式

    实现form表单的提交有多种方式,这里我们主要讲两种常用的. 注:此Demo是在SSM框架下完成的,数据库采用MySQL,关于ssm整合的相关知识,这里不做过多赘述.主要展示表单提交方式,暂不考虑代码 ...

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

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

  8. form和ajax同时提交吗,form表单提交与ajax消息传递

    form表单提交与ajax消息传递 1.前后端传输数据编码格式contentType: urlencoded 对应的数据格式:name=xxx&password=666 后端获取数据:requ ...

  9. ajax提交,form表单提交,onsubmit=return checksubmit()提交验证

    Ajax提交的两种方式: 一是url参数提交数据, 二是form提交(和平常一样在后台可以获取到Form表单的值).在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交 一.Url参数提交数据 ...

最新文章

  1. Fragment的startActivityForResult详细解决方案
  2. IBM超越谷歌抵达量子计算里程碑:研制出50量子位计算机
  3. Spring之面向切面编程AOP(三)
  4. C++ —— C++数据类型
  5. Android studio http 代理设置
  6. zabbix2.4 mysql模板_zabbix自带的模板监控mysql
  7. python函数控制词典_Python 基础之集合相关操作与函数和字典相关函数
  8. 【树状数组】Bzoj1878[SDOI2009] HH的项链
  9. 借助xUnit减少了生产问题
  10. 1.1 OC类的认识
  11. 解决Nginx + PHP(FastCGI)遇到的502 Bad Gateway错误[原创]
  12. 浏览器地址栏中加入ico图标的二种方法
  13. 人脸识别技术大起底,你了解多少?
  14. PS插件:灯光工厂安装教程
  15. 微信java版s40_微信诺基亚下载
  16. bat脚本_获取管理员权限
  17. POI 设置Word表格边框、表格文字水平居中
  18. 【24】NumPy IO
  19. centos 文件搜索命令
  20. Windows 7提示数据错误 循环冗余检查怎么办?

热门文章

  1. oracle备份恢复之rman恢复到异机
  2. 【转】【VC】VC程序运行时间测试函数
  3. netty之ObjectSizeEstimator
  4. ADT启动SDK Manager时一闪而过
  5. Generalized Linear Models
  6. win7右键新建文件夹不见了
  7. Oracle基于Linux平台的虚拟化与云计算战略
  8. ArrayList使用方法
  9. C++中定义对象的语法,带括号与不带括号有什么区别?
  10. Cisco 路由器防火墙配置命令及实例