热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

开发笔记:AJAX实现form表单提交

篇首语:本文由编程笔记#小编为大家整理,主要介绍了AJAX实现form表单提交相关的知识,希望对你有一定的参考价值。1.使用Ajax实现异步操作,

篇首语:本文由编程笔记#小编为大家整理,主要介绍了AJAX 实现form表单提交相关的知识,希望对你有一定的参考价值。



1.使用Ajax实现异步操作,点击登录按钮后,即触发form表单的提交事件,数据传输至后端

JSP:
















用户名
密码


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 }

效果展示:

 



推荐阅读
author-avatar
823825lml
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有