javascript - JQuery+Ajax进行登录检验，检验结果为真时如何跳转？
本文介绍了javascript - JQuery+Ajax进行登录检验，检验结果为真时如何跳转？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
新手学习JQuery+Ajax，使用的是SpringMVC+MyBatis，使用JQuery+Ajax进行用户校验时，用户名和密码已经能传到后台，匹配完以后如何操作呢？不知道该怎么进行跳转操作了，Ajax已经把数据传到下面的login方法，username和password都获取过来了，用户名密码正确的前提下，如何跳转到login页面呢？
我想实现的是：如果用户存在，就跳转到主页，如果用户不存在，就提示用户名或密码错误。
<html>
<head>
<title>主页</title>
<%--引入bootstrap核心css文件--%>
<link rel="stylesheet" href="css/bootstrap.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="js/jquery-3.1.1.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap.js"></script>
<script>
function check() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if(username==""||password==""){
alert("用户名和密码不能为空，请重新输入");
}else{
$.ajax({
type:'POST',
url:"/user/login.action",
data:{
username:username,
password:password
},
success:function(data,status) {
}
})
}
}
</script>
</head>
<body class="container">
<h3>(SpringMVC+Mybatis框架demo)</h3>
</br>
<h2>用户登陆</h2>
<form role="form">
<div class="row">
<div class="form-group col-md-3">
<label>用户名</label>
<input type="email" name="username" class="form-control" id="username" placeholder="邮箱或电话号码">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<label>密码</label>
<input type="password" name="password" class="form-control" id="password" placeholder="输入密码">
</div>
</div>
<div class="checkbox">
<label>
<input type="checkbox">记住密码
</label>
</div>
<div>
<button type="button" class="btn btn-primary" onclick="check()">登录</button>
<a href="/user/register.action"><button type="button" class="btn btn-link">注册</button></a>
</div>
</form>
</body>
</html>
controller层
@Controller
@RequestMapping("/user")
public class loginController {
User user;
@Resource
UserDao userDao;
/**
* 用户登录
* @param username
* @param password
* @param model
* @return
*/
@RequestMapping("/login")
public String login(String username,String password,Model model){
user = userDao.QueryUserByUserName(username,password);
if(null==user){
return "error";
}else {
model.addAttribute(user);
return "login";
}
}在controller层也可以接到ajax穿过的数据，但是不知道为什么即使用户名密码正确，也不跳转
…………………………………………………………………………分割线………………………………
按照两位答主的回答做了一下，出现了下面的问题
点击登录按钮没有反应
success函数体内的alter也无效
附上controller的代码图片：return字符串没有对应的jsp。
解决方案
// 跳转是你控制的 不是后端
// 正常情况下 有几种情况 一般后端的data里面会告诉你 用户是否存在
是否用户名正确 但是密码不正确 这样用户体验更好一些
最好不要同时提示就说 用户名或密码错误。
// 登录成功
if(data.code === 'success') {
//do sth....
window.location.href = "/index"; // 成功跳转到首页
// 用户不存在 可能会叫你去注册
} else if (用户不存在情况) {
// 就是密码错误等等情况
} else if(用户名存在 密码不正确){
}这种情况打个debugger单步跟一下，很快就能发现问题，加油 看看哪步导致没进程序 或者说你的js有问题 已经挂了
这篇关于javascript - JQuery+Ajax进行登录检验，检验结果为真时如何跳转？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
