神奇的问题!快被折磨疯了....

神奇的问题!快被折磨疯了....

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>
				&nbsp&nbsp&nbsp&nbsp
				<h4 class="h">没有账号?</h4>
				&nbsp&nbsp&nbsp
				<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>密&nbsp&nbsp&nbsp&nbsp码:<input type="password"
					name="password" placeholder="请输入密码"></td>
			</tr>
			<tr>
				<td>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
					<!-- 此处将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之后没有反应的情况,,.....我尝试着一个字符一个字符对照着去写...还是没有用,到底是怎么回事

正在回答

登陆购买课程后可参与讨论,去登陆

3回答

你好同学,既然源码都没有问题证明你的开发环境是没有问题的,你的程序去掉逗号之后是可以运行成功的,也有显示效果,

http://img1.sycdn.imooc.com//climg/5bc5bb9900010f7d08930273.jpg

如下是我运行成功的代码,建议你新建一个工程,将我的代码粘贴进去,如果没有问题,就参照着进行修改。祝学习愉快~

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>
                &nbsp&nbsp&nbsp&nbsp
                <h4 class="h">没有账号?</h4>
                &nbsp&nbsp&nbsp
                <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>密&nbsp&nbsp&nbsp&nbsp码:<input type="password"
                    name="password" placeholder="请输入密码"></td>
            </tr>
            <tr>
                <td>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    <!-- 此处将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中和浏览器的控制台中都会有报错提示的。

http://img1.sycdn.imooc.com//climg/5bc57fe00001550508530089.jpg

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

http://img1.sycdn.imooc.com//climg/5bc5803a0001caa509700125.jpg

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

http://img1.sycdn.imooc.com//climg/5bc57ffc0001461e04760287.jpg

  • 提问者 邓承鑫 #1
    反复检查还是不对,可能是我的开发环境有问题.......
    2018-10-16 17:36:22
  • 提问者 邓承鑫 #2
    刚看到Firefox里面控制台有这么一句:unreachable code after return statement[详细了解]
    2018-10-16 17:37:39
chrismorgen 2018-10-16 11:42:51

建议同学在浏览器中按F12,查看一下浏览器的控制台中是否有报错提示呢?如果有报错提示,建议将报错提示粘贴上来,方便老师具有针对性的为你解答,祝学习愉快~

  • 提问者 邓承鑫 #1
    老师帮我看下是不是我写的有我没发现的问题...我刚看了浏览器没有报错提示啊
    2018-10-16 12:14:44
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
从网页搭建入门Java Web2018版
  • 参与学习           人
  • 提交作业       1088    份
  • 解答问题       10204    个

如果你有Java语言基础,又想以后从事Java Web开发,那么本路径是你的不二选择!本路径从网页搭建开始入手,通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变!

了解课程
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师