点击验证码无法刷新
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path;
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>登录页面</title>
<style type="text/css">
.code {
background: url(code_bg.jpg);
font-family: Arial;
font-style: italic;
color: blue;
font-size: 20px;
border: 0;
padding: 2px 3px;
letter-spacing: 3px;
font-weight: bolder;
float: left;
cursor: pointer;
width: 80x;
height: 30px;
line-height: 20px;
text-align: center;
vertical-align: middle;
}
a {
text-decoration: none;
font-size: 12px;
color: #288bc4;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body">
<center>
<h1>用户登录</h1>
<form action="<%=basePath%>/LoginServlet" method="post"
onsubmit="return validateCode()">
<table width="320px" cellspacing="0px" cellpadding="0px" border="1px">
<tr>
<td>用户名</td>
<td colspan="2"><input type="text" name="username"
placeholder="用户名为3-12位字母数字或下划线组合"></td>
</tr>
<tr>
<td>密 码</td>
<td colspan="2"><input type="password" name="password"
placeholder="长度为5-12位字母数字或下划线组合"></td>
</tr>
<tr>
<td>验证码</td>
<td style="border-right-style: none;"><input type="text"
name="checkCode" placeholder="请输入验证码" id="inputCode"></td>
<td style="border-left-style: none;"><div class="code"
id="checkCode">
<img id="img1" src="http://localhost:8080/ImoocProj4/kaptcha.jpg" />
</div></td>
<!-- 点击验证码时刷新 -->
<script type="text/javascript" src="/ImoocProj4/resources/js/jquery-1.4.2.js">
$(function() {
$('#img1').click( function() {
$(this).attr('src','kaptcha.jpg?'+ Math.floor(Math.random() * 100));
});
});
</script>
</tr>
<tr>
<td colspan="3" style="text-align: center"><input
type="submit" value="登录"> <input type="reset" value="取消">
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
0
收起
正在回答
7回答
1、<script type="text/javascript" src="/ImoocPro4/WebContent/resources/js/jquery-1.12.4.min.js"> 去掉WebContent 或者改为
<script type="text/javascript" src="<%=basePath%>/resources/js/jquery-1.12.4.min.js">
2、去掉jsp页面中css部分的
.code {
background: url(code_bg.jpg);
font-family: Arial;
font-style: italic;
color: blue;
font-size: 20px;
border: 0;
padding: 2px 3px;
letter-spacing: 3px;
font-weight: bolder;
float: left;
cursor: pointer;
width: 80x;
height: 30px;
line-height: 20px;
text-align: center;
vertical-align: middle;
}以及:
<div class="code" id="checkCode">
3、修改后的代码如下：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path;
String msg = "";
if(request.getAttribute("msg")!=null){
msg = (String)request.getAttribute("msg");
}
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>登录页面</title>
<style type="text/css">
a {
text-decoration: none;
font-size: 12px;
color: #288bc4;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<center>
<h1>用户登录</h1>
<h3><font color="red"></font></h3>
<form action="<%=basePath%>/LoginServlet" method="post"
onsubmit="return validateCode()">
<table width="320px" cellspacing="0px" cellpadding="0px" border="1px">
<tr>
<td>用户名</td>
<td colspan="2"><input type="text" name="username" pattern="[a-zA-Z_0-9]{3,12}" required="required"
placeholder="用户名为3-12位字母数字或下划线组合"></td>
</tr>
<tr>
<td>密 码</td>
<td colspan="2"><input type="password" name="password" pattern="[a-zA-Z_0-9]{5,12}" required="required"
placeholder="长度为5-12位字母数字或下划线组合"></td>
</tr>
<tr>
<td>验证码</td>
<td style="border-right-style: none;"><input type="text"
name="checkCode" placeholder="请输入验证码" id="inputCode"></td>
<td style="border-left-style: none;">
<img id="changecode" src="<%=basePath%>/kaptcha.jpg" />
</td>
<script src="<%=basePath%>/resources/js/jquery-1.12.4.min.js" type="text/javascript"></script>
<script >
$(function() {
alert();
$("#changecode").on("click",function(){
$(this).attr("src","<%=basePath%>/kaptcha.jpg?d="+new Date().getTime());
}) ;
});
</script>
</tr>
<tr>
<td colspan="3" style="text-align: center"><input
type="submit" value="登录"> <input type="reset" value="取消">
</td>
</tr>
</table>
</form>
</center>
</body>
</html>如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
慕桂英8566455
2018-11-08 10:05:31
项目名是IMOOCPro4，我后来有改动一下，老师index.jsp 以这个为准吧
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path;
String msg = "";
if(request.getAttribute("msg")!=null){
msg = (String)request.getAttribute("msg");
}
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>登录页面</title>
<style type="text/css">
.code {
background: url(code_bg.jpg);
font-family: Arial;
font-style: italic;
color: blue;
font-size: 20px;
border: 0;
padding: 2px 3px;
letter-spacing: 3px;
font-weight: bolder;
float: left;
cursor: pointer;
width: 80x;
height: 30px;
line-height: 20px;
text-align: center;
vertical-align: middle;
}
a {
text-decoration: none;
font-size: 12px;
color: #288bc4;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<center>
<h1>用户登录</h1>
<h3><font color="red"></font></h3>
<form action="<%=basePath%>/LoginServlet" method="post"
onsubmit="return validateCode()">
<table width="320px" cellspacing="0px" cellpadding="0px" border="1px">
<tr>
<td>用户名</td>
<td colspan="2"><input type="text" name="username" pattern="[a-zA-Z_0-9]{3,12}" required="required"
placeholder="用户名为3-12位字母数字或下划线组合"></td>
</tr>
<tr>
<td>密 码</td>
<td colspan="2"><input type="password" name="password" pattern="[a-zA-Z_0-9]{5,12}" required="required"
placeholder="长度为5-12位字母数字或下划线组合"></td>
</tr>
<tr>
<td>验证码</td>
<td style="border-right-style: none;"><input type="text"
name="checkCode" placeholder="请输入验证码" id="inputCode"></td>
<td style="border-left-style: none;"><div class="code"
id="checkCode">
<img id="changecode" src="http://localhost:8080/ImoocPro4/kaptcha.jpg" />
</div></td>
<script type="text/javascript" src="/ImoocPro4/WebContent/resources/js/jquery-1.12.4.min.js">
$(function() {
$('#changecode').click( function() {
$(this).attr("src","http://localhost:8080/ImoocPro4/kaptcha.jpg?d="+ Math.floor(Math.random() * 100));
});
});
</script>
</tr>
<tr>
<td colspan="3" style="text-align: center"><input
type="submit" value="登录"> <input type="reset" value="取消">
</td>
</tr>
</table>
</form>
</center>
</body>
</html>报错信息如下
目录结构如下
慕桂英8566455
2018-11-07 18:31:05
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path;
String msg = "";
if(request.getAttribute("msg")!=null){
msg = (String)request.getAttribute("msg");
}
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>登录页面</title>
<style type="text/css">
.code {
background: url(code_bg.jpg);
font-family: Arial;
font-style: italic;
color: blue;
font-size: 20px;
border: 0;
padding: 2px 3px;
letter-spacing: 3px;
font-weight: bolder;
float: left;
cursor: pointer;
width: 80x;
height: 30px;
line-height: 20px;
text-align: center;
vertical-align: middle;
}
a {
text-decoration: none;
font-size: 12px;
color: #288bc4;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<center>
<h1>用户登录</h1>
<h3><font color="red"></font></h3>
<form action="<%=basePath%>/LoginServlet" method="post"
onsubmit="return validateCode()">
<table width="320px" cellspacing="0px" cellpadding="0px" border="1px">
<tr>
<td>用户名</td>
<td colspan="2"><input type="text" name="username" pattern="[a-zA-Z_0-9]{3,12}" required="required"
placeholder="用户名为3-12位字母数字或下划线组合"></td>
</tr>
<tr>
<td>密 码</td>
<td colspan="2"><input type="password" name="password" pattern="[a-zA-Z_0-9]{5,12}" required="required"
placeholder="长度为5-12位字母数字或下划线组合"></td>
</tr>
<tr>
<td>验证码</td>
<td style="border-right-style: none;"><input type="text"
name="checkCode" placeholder="请输入验证码" id="inputCode"></td>
<td style="border-left-style: none;"><div class="code"
id="checkCode">
<img id="img1" src="http://localhost:8080/ImoocPro4/kaptcha.jpg" />
</div></td>
<!-- 点击验证码时刷新 -->
<script type="text/javascript" src="/ImoocProj4/resources/js/jquery-1.4.2.js">
$(function() {
$('#img1').click( function() {
$(this).attr('src','http://localhost:8080/ImoocPro4/code_bg.jsp'+ Math.floor(Math.random() * 100));
});
});
</script>
</tr>
<tr>
<td colspan="3" style="text-align: center"><input
type="submit" value="登录"> <input type="reset" value="取消">
</td>
</tr>
</table>
</form>
</center>
</body>
</html>index的界面我有改动过，老师以这个为准
慕桂英8566455
2018-11-07 18:27:26
package com.imooc.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.imooc.bean.CourseDaoImpl;
/**
* 用户登录的Servlet
*/
public class LoginServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
//后台校验用户名和密码是否正确
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println("用户名为"+username+"\t密码为："+password);
boolean flag1 = username.matches("[a-zA-Z_0-9]{3,12}");
boolean flag2 = username.matches("[a-zA-Z_0-9]{5,12}");
if(flag1&&flag2) {
//获取用户传来的验证码
String code1 = request.getParameter("checkCode");
//获取系统产生的验证码
String code2 = (String)request.getSession().getAttribute("kcode");
System.out.println("用户输入的验证码："+code1+"\t系统产生的验证码："+code2);
//code1和code2均不为空，且两者相等
if(code1!=null && code2!=null) {
if(code1.equals(code2)) {
//验证码正确，判断是超级用户还是普通用户
if(username.equals("imooc")) {
if(password.equals("imooc")) {
//超级用户登录成功
request.getSession().setAttribute("username", username);
request.getSession().setAttribute("flag", "1");
response.sendRedirect(request.getContextPath()+"/pages/server.jsp");
System.out.println("超级用户登录成功");
}else {
//密码错误
request.setAttribute("msg", "密码错误");
request.getRequestDispatcher("/pages/index.jsp").forward(request, response);
System.out.println("超级用户密码错误");
}
}else {
//普通用户
int n = CourseDaoImpl.login(username, password);
if(n==1) {
//登录成功
request.getSession().setAttribute("username", username);
response.sendRedirect(request.getContextPath()+"/pages/server.jsp");
System.out.println("普通用户登录成功");
}else if(n==2) {
//密码错误
request.setAttribute("msg", "用户名或密码错误");
request.getRequestDispatcher("/pages/index.jsp").forward(request, response);
System.out.println("普通用户登录失败");
}else {
//用户名不存在
request.setAttribute("msg", "用户名不存在");
request.getRequestDispatcher("/pages/index.jsp").forward(request, response);
System.out.println("用户名不存在");
}
}
}else {
//验证码错误，输出提示信息
System.out.println("验证码错误");
request.setAttribute("msg", "验证码错误");
request.getRequestDispatcher("pages/index.jsp").forward(request, response);
}
}else {
System.out.println("未输入验证码");
//未输入验证码
request.setAttribute("msg", "请先输入验证码");
request.getRequestDispatcher("pages/index.jsp").forward(request, response);
}
}else {
System.out.println("后端验证失败");
//后端验证用户名和密码格式错误，输出提示信息
request.setAttribute("msg", "请先完成登录");
request.getRequestDispatcher("/pages/index.jsp").forward(request, response);
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}package com.imooc.bean;
public class Users {
private String username;
private String password;
public Users() {
}
public Users(String username, String password) {
this.username = username;
this.password = password;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}package com.imooc.bean;
public class Course {
//课程id，课程名，课程方向，描述，时长，操作人
private String id;
private String courseName;
private String dirction;
private String description;
private String duration;
private String userName;
public Course() {
}
public Course(String id, String courseName, String dirction, String description, String duration, String userName) {
this.id = id;
this.courseName = courseName;
this.dirction = dirction;
this.description = description;
this.duration = duration;
this.userName = userName;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getCourseName() {
return courseName;
}
public void setCourseName(String courseName) {
this.courseName = courseName;
}
public String getDirction() {
return dirction;
}
public void setDirction(String dirction) {
this.dirction = dirction;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public String getDuration() {
return duration;
}
public void setDuration(String duration) {
this.duration = duration;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
}package com.imooc.bean;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class CourseDaoImpl {
/*
* 用户登录: public int login(String username, String password) {};
* 普通管理员添加方法：public void addUser(String username, String password);
* 查询所有管理员： public List<Map<String, Object>> getAllUsers();
* 删除管理员：public void delUser(String username);
* 添加课程：public void addCourse(Course couse);
* 查询所有课程信息：public List<Course> getAllCourse();
* 批量导入Excel课程表数据：public void importCourse(ArrayList<ArrayList<String>> courseList);
*/
// 用户登录
private static final List<Map<String, Users>> usersTable = new ArrayList<Map<String, Users>>();
private static final List<Course> courseTable = new ArrayList<Course>();
public static int login(String username, String password) {
int n = 0;
for (int i = 0; i < usersTable.size(); i++) {
for (String key : usersTable.get(i).keySet())
if (username.equals(usersTable.get(i).get(key).getUsername())
&& password.equals(usersTable.get(i).get(key).getPassword())) {
n = 1;
break;
}
}
return n;
}
// 普通管理员添加方法
public static int addUser(String username, String password) {
int n = 1;
for(int i = 0;i<usersTable.size();i++) {
if(usersTable.get(i).containsKey(username)) {
n = 0;
break;
}
}
if(n==1) {
Map<String,Users> map = new HashMap<String,Users>();
map.put(username, new Users(username,password));
usersTable.add(map);
}
return n;
}
// 查询所有管理员
public static List<Map<String, Users>> getAllUsers() {
return usersTable;
}
//删除管理员
public static void delUser(String username) {
for(int i =0;i<usersTable.size();i++) {
if(usersTable.get(i).containsKey(username)) {
usersTable.remove(i);
break;
}
}
}
//添加课程
public static int addCourse(Course course) {
int n = 1;
for(int i=0;i<courseTable.size();i++) {
if(course.getId().equals(courseTable.get(i).getId())) {
n = 0;
break;
}
}
if(n==1) {
courseTable.add(course);
}
return n;
}
//查询所有课程信息
public static List<Course> getAllCourse(){
return courseTable;
}
//批量导入Excel课程表数据
public static void importCourse(ArrayList<ArrayList<String>> courseList) {
}
}
好帮手慕阿莹
2018-11-06 18:59:48
$(this).attr('src','kaptcha.jpg?'+ Math.floor(Math.random() * 100));中kaptcha.jpg?改为： http://localhost:8080/ImoocProj4/kaptcha.jpg 试试。
如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
从网页搭建入门Java Web2018版
- 参与学习 人
- 提交作业 1088 份
- 解答问题 10204 个
如果你有Java语言基础，又想以后从事Java Web开发，那么本路径是你的不二选择！本路径从网页搭建开始入手，通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星