体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

5-1问题，js找不到路径

来源：5-1 完成验证功能

qq_9o後虛徦_0

2018-06-12 15:08:38

<%--

  Created by IntelliJ IDEA.

  User: Administrator

  Date: 2017/9/8

  Time: 21:10

  To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>登录</title>

    <style>#code{height:30px;}</style>

</head>

<body>


<form action="submit.action">


    <p> <input type="text" name="kaptcha" id="code" value="" maxlength="4" placeholder="请输入验证码"/>

    <img src="http://localhost:8080/imooccode/kaptcha.jpg" id="changecode"/>

    </p>

    <p>

    <input type="button" id="login" value="登录">

    </p>

    <div id="result"></div>

</form>


<script src="http://localhost:8080/imooccode/jquery-1.12.4.min.js" type="text/javascript"></script>

<script>


    $(function(){

        $("#changecode").on("click",function(){

            $(this).attr("src","http://localhost:8080/imooccode/kaptcha.jpg?d="+new Date().getTime());

        });

         //给登录按钮绑定点击事件

        $("#login").on("click",function(){

            //获取用户输入的验证码

            var code = $("#code").val();

            //alert(code);

            var params = {"code":code};

            $.post("http://localhost:8080/imooccode/login",params,function(data){

//                if(data=="fail"){

//                     alert("验证码输入有误!");

//                }

                if(data=="success"){

                    $("#result").html("验证码输入正确");

                }else{

                    $("#result").html("验证码输入有误，请重新输入...");

                    $("#code").val("").focus();

                }

            });

        });

    })


</script>


</body>

</html>





<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"

         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"

         version="3.1">


    <!--关于kaptcha验证码的配置-->

   <!-- <servlet>

        <servlet-name>Kaptcha</servlet-name>

        <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>

    </servlet>

    <servlet-mapping>

        <servlet-name>Kaptcha</servlet-name>

        <url-pattern>/kaptcha.jpg</url-pattern>

    </servlet-mapping>-->

    <servlet>

        <servlet-name>Kaptcha</servlet-name>

        <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>

        <init-param>

            <param-name>kaptcha.border</param-name>

            <param-value>no</param-value>

        </init-param>

        <init-param>

            <param-name>kaptcha.image.width</param-name>

            <param-value>100</param-value>

        </init-param>

        <init-param>

            <param-name>kaptcha.image.height</param-name>

            <param-value>40</param-value>

        </init-param>

        <init-param>

            <param-name>kaptcha.textproducer.font.size</param-name>

            <param-value>28</param-value>

        </init-param>

        <init-param>

            <param-name>kaptcha.textproducer.char.string</param-name>

            <param-value>qwertyuiopasdfghjklzxcvbnm123456789</param-value>

        </init-param>

        <init-param>

            <param-name>kaptcha.textproducer.char.length</param-name>

            <param-value>4</param-value>

        </init-param>

        <init-param>

            <param-name>kaptcha.noise.impl</param-name>

            <param-value>com.google.code.kaptcha.impl.DefaultNoise</param-value>

        </init-param>

        <init-param>

            <param-name>kaptcha.obscurificator.impl</param-name>

            <param-value>com.google.code.kaptcha.impl.FishEyeGimpy</param-value>

        </init-param>

        <init-param>

            <!--session.setAttribute("kcode",生成好的验证吗)-->

            <param-name>kaptcha.session.key</param-name>

            <param-value>kcode</param-value>

        </init-param>

    </servlet>

    <servlet-mapping>

        <servlet-name>Kaptcha</servlet-name>

        <url-pattern>/kaptcha.jpg</url-pattern>

    </servlet-mapping>

    <servlet>

        <servlet-name>LoginServlet</servlet-name>

        <servlet-class>com.imooc.code.LoginServlet</servlet-class>

    </servlet>

    <servlet-mapping>

        <servlet-name>LoginServlet</servlet-name>

        <url-pattern>/login</url-pattern>

    </servlet-mapping>



</web-app>




package com.imooc.code;


import java.io.IOException;

import java.io.PrintWriter;


import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;


/**

 * Servlet implementation class LoginServlet1

 */

@WebServlet("/LoginServlet1")

public class LoginServlet1 extends HttpServlet {

private static final long serialVersionUID = 1L;

       

   

    public LoginServlet1() {

        super();

        // TODO Auto-generated constructor stub

    }


protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

// TODO Auto-generated method stub

request.setCharacterEncoding("UTF-8");

response.setCharacterEncoding("UTF-8");

//需要获取浏览器输出流对象

PrintWriter out = response.getWriter();

//获取用户传递过来的验证码

String code = request.getParameter("code");

System.out.println(code);

//获取验证码框架产生的验证码

String sessionCode = (String)request.getSession().getAttribute("kcode");

if(code!=null && sessionCode!=null) {

if(code.equalsIgnoreCase(sessionCode)) {

out.print("success");

}

}else {

out.print("fail");

}

out.flush();

out.close();

}


protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

// TODO Auto-generated method stub

doGet(request, response);

}


}



http://img.mukewang.com/climg/5b1f71660001f33705830969.jpg

写回答

5回答

好帮手慕阿莹

2018-06-14

1、同学应该把 js css文件夹放在WebContent下，而不是项目下

2、应该看浏览器控制台的Sources下的，而不是Application。

http://img.mukewang.com/climg/5b221c3b0001ebe905640497.jpg

0

好帮手慕阿莹

2018-06-14

同学，从你上边的配图来看，你的js文件放在了Scripts文件夹下，

http://img.mukewang.com/climg/5b21c7a70001006806180247.jpg

而我运行代码的时候，是把js文件放到了js文件夹下，

http://img.mukewang.com/climg/5b21c80900019f2604480318.jpg

但因为之前你的问题  http://class.imooc.com/course/qadetail/55282  显示在js文件夹下

不清楚同学具体是放在那儿了？是否是同一个工程呢？

另外建议同学不要把代码贴在回复里，会失去代码的格式，可以新开一个回答，贴代码

0
hq_9o後虛徦_0
h 老师，我是放在js文件下，但谷歌浏览器现实的是Scripts文件夹下，这是什么原因呢？
h018-06-14
共1条回复

好帮手慕阿莹

2018-06-13

按照上边的修改后，粘到老师的源码中是可以正常显示的，同学可以在新的回答里，贴一下你修改后的test.jsp的代码么？

你也可以测试一下，下载老师的源码，把按照老师告诉你的修改方式修改后的代码贴到test.jsp里，看看是否有效？

修改你的LoginServlet1为LoginServlet  后，运行效果如下。

http://img.mukewang.com/climg/5b207d330001f37319160256.jpg

另外，你在test.jsp中验证的时候，是用的 http://localhost:8080/imooccode/login" ，你web.xml中配置的 http://localhost:8080/imooccode/login 这个的虚拟地址对应的是  LoginServlet  而你贴出来的代码关于LoginServlet命名的是LoginServlet1

另外，建议修改后按住ctrl键去点击页面的刷新按钮，强制刷新一下页面。

0
hq_9o後虛徦_0
h <script src="js/jquery-1.12.4.min.js" type="text/javascript"></script> <script> $(function(){ $("#changecode").on("click",function(){ $(this).attr("src","http://localhost:8080/imooccode/kaptcha.jpg?d="+new Date().getTime()); }); //给登录按钮绑定点击事件 $("#login").on("click",function(){ //获取用户输入的验证码 var code = $("#code").val(); alert(code); var params = {"code":code}; $.post("http://localhost:8080/imooccode/login",params,function(data){ // if(data=="fail"){ // alert("验证码输入有误!"); // } if(data=="success"){ $("#result").html("验证码输入正确"); }else{ $("#result").html("验证码输入有误，请重新输入..."); $("#code").val("").focus(); } }); }); }) </script> </body> </html>
h018-06-14
共3条回复

好帮手慕阿莹

2018-06-12

把你test.jsp里的

<script src="http://localhost:8080/imooccode/jquery-1.12.4.min.js" type="text/javascript"></script>

改为：

<script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>

另外，如果你想它弹出你输入的验证码，

http://img.mukewang.com/climg/5b1f7fb40001baca06190303.jpg

0
hq_9o後虛徦_0
h Failed to load resource: the server responded with a status of 404 () test.jsp:24 Uncaught ReferenceError: $ is not defined at test.jsp:24 :8080/favicon.ico:1 Failed to load resource: the server responded with a status of 404 () 谷歌浏览器还是报这样的错误，alert(code)也没有弹出
h018-06-12
共1条回复

好帮手慕阿莹

2018-06-12

请问同学是图片出不来么？我把你的代码粘到老师的源码中测试是没有问题的：

http://img.mukewang.com/climg/5b1f7a6a0001cabf03920115.jpg

http://img.mukewang.com/climg/5b1f7a7100011da605300234.jpg

建议同学检查一下你的js文件有没有引进呢？或者放的位置是否正确呢？

http://img.mukewang.com/climg/5b1f7abf0001b7d103520154.jpg

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！


0
hq_9o後虛徦_0
h 是输入验证码后，没有弹出提示框显示我输入的内容，而且也显示js找不到路径
h018-06-12
共1条回复

0 学习 · 10204 问题

查看课程

相似问题

5-1问题，js找不到路径，获取验证码提示框没有弹出

回答 1

5-1问题，js找不到路径

回答 1

请问为什么导入了jquery的jar包之后不能用呢？

回答 2

为什么找不到post请求

回答 3

5-1，js找不到路径，点击登录没有弹出框显示我输入的内容

回答 1

打开慕课网App查看更多内容