Ajax提交form表单
Posted eclipse编程
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax提交form表单相关的知识,希望对你有一定的参考价值。
我们在使用form表单的时候,点击submit按钮,一般会使得页面进行跳转,但是页面的跳转意味着我们把控制权交给了后台。
有时候我们希望让前端掌握控制权,比如我们在设计登录页面的时候,如果用户名和密码正确,我们在前端让它跳转到列表页面。
如果用户名或者密码错误,我们希望在登录页面给用户提示信息。一般这种异步的提交方式,我们都会想到通过Ajax对表单进行提交。
01
1) 在传统方式中,登录按钮的type为"submit"类型;
<input type="submit" value="登录">
2) 在ajax方式中,登录按钮的type为"button"类型;
<input type="button" onclick="login()" value="登录">
3) 在传统方式中,form表单的action=" "不为空;
02
常见的form提交方式
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<title>企业员工管理系统-登录</title>
<meta charset=UTF-8">
<link rel="shortcut icon" href="${path}/static/image/zd.png" type="image/x-icon" />
</head>
<body>
<div>
<form action="employee/login" method="post">
用户名:<input type="text" id="username" name="username" placeholder="请输入账号" ><span id="s_username"></span></div>
密码:<input type="password" id="password" name="password" maxlength="6" placeholder="请输入密码"><span style="color:red" id="s_password"></span></div>
<input type="submit" value="登录">
</form>
</div>
</body>
</html>
03
Ajax的方式提交form表单
//前端页面:
<script>
function login() {
var username=$("#username").val();
var password=$("#password").val();
var roleType=$("input[type='radio']:checked").val();
$.ajax({
type: "POST",
dataType: "json",
url: "employee/login" ,
data: {"username":username,"password":password,"roleType":roleType},
success: function (result) {
var span = $("#s_password");
if(result.userExsit){
//登录成功,跳转到列表页面
window.location.href = "${path}/employee/list";
}else{
//登录失败,给用户提示信息
alert("身份选择或者密码错误!");
}
},
error : function() {
alert("异常!");
}
});
}
</script>
<form action="" method="post">
<div class="form"> <img code-snippet__keyword">static/image/person.png" alt="账号" > <input type="text" id="username" name="username" placeholder="请输入账号" ><span id="s_username"></span></div>
<div class="form"> <img code-snippet__keyword">static/image/password.png" alt="密码" > <input type="password" id="password" name="password" maxlength="6" placeholder="请输入密码"><span style="color:red" id="s_password"></span></div>
<div class="radio"><label>身份:</label>
<input type="radio" name="roleType" value="1" checked> 管理员
<input type="radio" name="roleType" value="0"> 员工
</div>
<input type="button" onclick="login()" value="登录">
</form>
//后台Controller
@RequestMapping("/login")
@ResponseBody
public Object login(HttpServletRequest request,String username,String password,String roleType,Model model) {
//传参数
Map<String,Object> param=new HashMap<String,Object>();
param.put("username", username);
param.put("password", password);
param.put("roleType", Integer.parseInt(roleType));
Map<String,Object> result=new HashMap<String,Object>();
Employee emp=empService.login(param);
if(!StringUtils.isEmpty(emp)) {
HttpSession session = request.getSession();
session.setAttribute("employee", emp);
result.put("employee",emp);
result.put("userExsit",true);
}else {
result.put("userExsit",false);
}
return result;
}
/ END /
作者简介:一颗雷布斯,坚持学习的程序猿一枚,不爱穿格子衫,发量超级多,喜欢解决各种bug。
以上是关于Ajax提交form表单的主要内容,如果未能解决你的问题,请参考以下文章