神奇的问题!快被折磨疯了....
index.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String alert = (String) request.getAttribute("alert");
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">
input {
width: 250px;
height: 25px;
}
#login {
width: 255px;
height: 35px;
background-color: #FF2611;
border: 0px;
cursor: pointer;
color: white
}
.c1 {
font-size: 24px;
color: black;
font-weight: bolder
}
.c2 {
font-size: 14px;
color: #666;
}
.c3 {
font-size: 14px;
background: red;
color: white;
}
.h {
display: inline-block
}
#title {
color: red;
font-family: YaHei;
}
</style>
<script type="text/javascript" src="resources/js/jquery-1.4.2.js"></script>
</head>
<body>
<center>
<div>
<h1 class="h" id="title">
登录界面
</h3>
    
<h4 class="h">没有账号?</h4>
   
<h5 class="h">点击注册</h5>
<br>
<h4 class="tip"></h4>
</div>
<%-- <form action="<%=basePath%>LoginServlet" method="post"> --%>
<!-- //此处本来是用的是form表单实现数据传递,使用ajax,则不使用form,仅仅使用input+button的组合 -->
<table>
<tr>
<td>用户名:<input type="text" name="username"
placeholder="请输入登录名或手机号"></td>
</tr>
<tr>
<td>密    码:<input type="password"
name="password" placeholder="请输入密码"></td>
</tr>
<tr>
<td>             
<!-- 此处将submit项改为使用button+绑定ajax事件的形式 --> <!-- <input type="submit" name= "login" value ="登录" class="c3"> -->
<input type="button" name="login" value="登录" class="c3" id="login">
</td>
</tr>
</table>
<!-- </form> -->
</center>
<script type="text/javascript">
$("#login").click(function(){
$.ajax({
url:"<%=basePath%>/LoginServlet",
type:"post",
data:{
username:$("input[name=username]").val(),
password:$("input[name=password]").val()
},
dataType:"json",
success:function(result){
var flag =result.flag;
if(flag==true){
window.location.href="<%=basePath%>/pages/success.jsp",
}else{
$(".tip").text("您输入的用户名和密码不正确,请重试!");
}
}
});
});
</script>
</body>
</html>LoginServlet.java:
package aaa;
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 org.json.JSONObject;
/**
* Servlet implementation class LoginServlet
*/
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = (String) request.getParameter("username");
String password = (String) request.getParameter("password");
//创建一个JSONObject的对象,用于回传登录数据;
JSONObject jsonObject ;
if (username.equals("18921872059") && password.equals("123")) {
System.out.println("登陆成功");
//如果登录成功,则需要对ajax返回成功的数据
jsonObject = new JSONObject("{flag:true}");
} else {
System.out.println("登录失败!");
//如果登录失败,则需要对ajax返回失败数据,这里需要用到一个json
jsonObject = new JSONObject("{flag:false}");
}
//使用response相应页面,回传JSONObject的对象jsonObject,
response.getOutputStream().write(jsonObject.toString().getBytes("utf-8"));
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}快被折磨疯了....完全按照视频里面的写的....原代码下载下来也可以用,我把JS这一点删掉自己写一遍,就会出现点击button之后没有反应的情况,,.....我尝试着一个字符一个字符对照着去写...还是没有用,到底是怎么回事
0
收起
正在回答
3回答
你好同学,既然源码都没有问题证明你的开发环境是没有问题的,你的程序去掉逗号之后是可以运行成功的,也有显示效果,

如下是我运行成功的代码,建议你新建一个工程,将我的代码粘贴进去,如果没有问题,就参照着进行修改。祝学习愉快~
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String alert = (String) request.getAttribute("alert");
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">
input {
width: 250px;
height: 25px;
}
#login {
width: 255px;
height: 35px;
background-color: #FF2611;
border: 0px;
cursor: pointer;
color: white
}
.c1 {
font-size: 24px;
color: black;
font-weight: bolder
}
.c2 {
font-size: 14px;
color: #666;
}
.c3 {
font-size: 14px;
background: red;
color: white;
}
.h {
display: inline-block
}
#title {
color: red;
font-family: YaHei;
}
</style>
<script type="text/javascript" src="resources/js/jquery-1.4.2.js"></script>
</head>
<body>
<center>
<div>
<h1 class="h" id="title">
登录界面
</h3>
    
<h4 class="h">没有账号?</h4>
   
<h5 class="h">点击注册</h5>
<br>
<h4 class="tip"></h4>
</div>
<%-- <form action="<%=basePath%>LoginServlet" method="post"> --%>
<!-- //此处本来是用的是form表单实现数据传递,使用ajax,则不使用form,仅仅使用input+button的组合 -->
<table>
<tr>
<td>用户名:<input type="text" name="username"
placeholder="请输入登录名或手机号"></td>
</tr>
<tr>
<td>密    码:<input type="password"
name="password" placeholder="请输入密码"></td>
</tr>
<tr>
<td>             
<!-- 此处将submit项改为使用button+绑定ajax事件的形式 --> <!-- <input type="submit" name= "login" value ="登录" class="c3"> -->
<input type="button" name="login" value="登录" class="c3" id="login">
</td>
</tr>
</table>
<!-- </form> -->
</center>
<script type="text/javascript">
$("#login").click(function(){
$.ajax({
url:"<%=basePath%>/LoginServlet",
type:"post",
data:{
username:$("input[name=username]").val(),
password:$("input[name=password]").val()
},
dataType:"json",
success:function(result){
var flag =result.flag;
if(flag==true){
window.location.href="<%=basePath%>/pages/success.jsp"
}else{
$(".tip").text("您输入的用户名和密码不正确,请重试!");
}
}
});
});
</script>
</body>
</html>LoginServlet
package aaa;
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 org.json.JSONObject;
/**
* Servlet implementation class LoginServlet
*/
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = (String) request.getParameter("username");
String password = (String) request.getParameter("password");
//创建一个JSONObject的对象,用于回传登录数据;
JSONObject jsonObject ;
if (username.equals("18921872059") && password.equals("123")) {
System.out.println("登陆成功");
//如果登录成功,则需要对ajax返回成功的数据
jsonObject = new JSONObject("{flag:true}");
} else {
System.out.println("登录失败!");
//如果登录失败,则需要对ajax返回失败数据,这里需要用到一个json
jsonObject = new JSONObject("{flag:false}");
}
//使用response相应页面,回传JSONObject的对象jsonObject,
response.getOutputStream().write(jsonObject.toString().getBytes("utf-8"));
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
chrismorgen
2018-10-16 14:08:47
如下图所示,将逗号去掉即可,该错误在ide中和浏览器的控制台中都会有报错提示的。

浏览器中的报错提示如下图,同学可以通过看报错提示排查问题哦,

修订之后的效果如下图,如果我的建议解决了你的问题,请采纳,祝学习愉快~

chrismorgen
2018-10-16 11:42:51
建议同学在浏览器中按F12,查看一下浏览器的控制台中是否有报错提示呢?如果有报错提示,建议将报错提示粘贴上来,方便老师具有针对性的为你解答,祝学习愉快~
从网页搭建入门Java Web2018版
- 参与学习 人
- 提交作业 1088 份
- 解答问题 10204 个
如果你有Java语言基础,又想以后从事Java Web开发,那么本路径是你的不二选择!本路径从网页搭建开始入手,通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星