疑难杂症
程序员文章站
2022-07-08 17:26:49
...
一、使用 Ajax 提交表单，页面会刷新解决
- 原因：表单使用submit，会自动提交表单，当再次绑定单击事件时，又会重新提交表单，导致页面刷新。
- 解决方式：使用Ajax 条表单时，应使用button。
- 示例：
<%--
Created by IntelliJ IDEA.
User: 徐巍巍
Date: 2021/4/2
Time: 22:04
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>高校就业跟踪管理系统 | Login</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/iCheck/square/blue.css">
</head>
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<a href="${pageContext.request.contextPath}/pages/login.jsp"><b>高校就业跟踪</b>管理系统</a>
</div>
<div class="login-box-body">
<p class="login-box-msg">登录系统</p>
<form id="loginForm" name="loginForm" method="post">
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="账号" name="userAccount">
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="密码" name="userPassword">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="验证码" name="verifycode">
</div>
<div class="col-xs-4">
<a href="javascript:refreshCode()">
<img src="${pageContext.request.contextPath}/checkCode/test.do" title="看不清点击刷新" id="vcode"/>
</a>
</div>
</div>
<div class="box-footer">
<div class="row">
<div class="col-xs-8">
<div class="checkbox icheck">
<label><a href="#">忘记密码？</a></label>
</div>
</div>
<div class="col-xs-4">
<input type="button" id="loginBtn" class="btn btn-primary btn-block btn-flat" style="width: 90px" value="登录" onclick="loginFun()">
</div>
</div>
</div>
</form>
</div>
<!-- 出错显示的信息框 -->
<div class="alert alert-warning alert-dismissible" role="alert">
<strong id="loginMsgId"></strong>
</div>
</div>
<script src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/iCheck/icheck.min.js"></script>
<script>
//切换验证码
function refreshCode(){
//1.获取验证码图片对象
var vcode = document.getElementById("vcode");
//2.设置其src属性，加时间戳
vcode.src = "${pageContext.request.contextPath}/checkCode/test.do?time="+new Date().getTime();
}
// 用户登录，ajax
function loginFun() {
//加载数据
$.ajax({
url:"${pageContext.request.contextPath}/user/login.do", //访问后台的路径
type:'get',
data:$('#loginForm').serialize(), //将表单数据序列化，格式为name=value
dataType:'json',
async:false,
success:function(data){
var loginMsg = data.loginMsg;
if (loginMsg === "1"){
window.location.href="${pageContext.request.contextPath}/pages/admin_main.jsp"
}else if (loginMsg === "2"){
window.location.href="${pageContext.request.contextPath}/pages/student_main.jsp"
}else if (loginMsg === "3"){
window.location.href="${pageContext.request.contextPath}/pages/enterprise_main.jsp"
}else {
$("#loginMsgId").html(loginMsg);
refreshCode();
}
},
error:function(){
$("#loginMsgId").html("服务器开小差了..........");
refreshCode();
}
});
}
</script>
</body>
</html>
推荐阅读