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值和接收的对象的属性名一致,那么传值就没有什么问题.不过,在前几天的开发 ...
随机推荐
- 18c & 19c Physical Standby Switchover Best Practices using SQL*Plus (Doc ID 2485237.1)
18c & 19c Physical Standby Switchover Best Practices using SQL*Plus (Doc ID 2485237.1) APPLIES T ...
- Appium(二):Node.js下载与安装、非GUI版本appium下载与安装、GUI版本appium下载与安装
1. 下载并安装Node.JS 进入官网:https://nodejs.org/en/. 由于我们是新手嘛,所以肯定是越稳定越好啦,所以选择下载LTS版本. 进入文件下点击文件就进入安装界面了,点击n ...
- Python的map方法的应用
Map方法,第一个参数要写一个匿名函数表达式,或者是一个函数引用,第二个第三个往后都是表达式用到的参数,参数一般是可迭代的 1.比如下面这个map方法,两个参数,第一个 lambda x: x*x是匿 ...
- weblogic解决jar包冲突
前言 在项目中利用POI开发excel.word的导入导出功能,而POI在解析xlsx及docx两种高版本文档时需要依赖xmlbeans包,但weblogic容器中提供了低版本的xmlbeans,从而 ...
- Umi + Dva + Antd的React项目实践
记录一下最近项目所用到的技术React + Dva + Antd + umi ,以免忘记.之前没有用过它们其中一个,也是慢慢摸索,了解数据整个流程. 先了解下概念 React 不多说,3大框架之一: ...
- 解决IDEA中的DashBoard 不显示端口号
第一步:找到.idea目录下的workspace.xml文件 第二步:找到下图位置 并添加红色部分代码 添加代码如下: <option name="configurationTypes ...
- 【数据结构】什么是二叉查找树(BST)
什么是二叉查找树(BST) 1. 什么是BST 对于二叉树中的每个节点X,它的左子树中所有项的值都小于X中的项,它的右子树中所有项的值大于X中的项.这样的二叉树是二叉查找树. 以上是一颗二叉查找树,其 ...
- Python自动发送邮件--smtplib模块
import smtplib from email.mime.multipart import MIMEMultipart from email.mime.text import MIMEText f ...
- PostgreSQL 查询、创建、删除索引
--查询索引 select * from pg_indexes where tablename='tab1'; --创建索引 tab1_bill_code_index 为索引名, create ind ...
- leaflet 结合 d3.js 实现 geojson 数据地形剖面分析(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...