jquery在JSP页面中不起作用答案

【问题标题】：jquery not working in JSP pagejquery在JSP页面中不起作用
【发布时间】：2013-09-22 22:00:30
【问题描述】：

我有一个 HTML 代码

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
$( document ).ready(function() {

    $("#username").keyup(function(){

    var username = $("#username").val().trim();

    if(username=="")
    {
         $("#usernameerrortext").html("Username should not be empty");
         return false;
    }
    else if(/[!@#$%\\^&*(){}[\]<>?\/|\-]/.test(username))
    {
        $("#usernameerrortext").html("Username should not contain special charatcers");
        return false;
    }
    else
    {
        $("#usernameerrortext").html("");
        return true;
    }
    });

    $("#password").keyup(function(){
    var password = $("#password").val().trim();

    if(password=="")
    {
         $("#passworderrortext").html("Password should not be empty");
         return false;
    }
    else
    {
        $("#passworderrortext").html("");
        return true;
    }
    });
});
</script>
<br/>Username:<input type="text" name="username" id="username"/>
<font color="red"><div id="usernameerrortext"></div></font>
<br>
Password:<input type="password" name="password" id="password"/>
<font color="red"><div id="passworderrortext"></div></font>

这是一个完美的 html 页面。但是当我将此代码粘贴到如下所示的 JSP 文件中时，我的 jquery 无法正常工作，

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>HDB SBBS</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
$( document ).ready(function() {

    $("#username").keyup(function(){

    var username = $("#username").val().trim();

    if(username=="")
    {
         $("#usernameerrortext").html("Username should not be empty");
         return false;
    }
    else if(/[!@#$%\\^&*(){}[\]<>?\/|\-]/.test(username))
    {
        $("#usernameerrortext").html("Username should not contain special charatcers");
        return false;
    }
    else
    {
        $("#usernameerrortext").html("");
        return true;
    }
    });

    $("#password").keyup(function(){
    var password = $("#password").val().trim();

    if(password=="")
    {
         $("#passworderrortext").html("Password should not be empty");
         return false;
    }
    else
    {
        $("#passworderrortext").html("");
        return true;
    }
    });
});
</script>
</head>
<body>
        <center>
            <h2>Login</h2>
            <form name="loginForm" id="loginForm" action="LoginServlet" method="post">
            <br/>Username:<input type="text" name="username" id="username">
            <font color="red"><div id="usernameerrortext"></div></font>
            <br/>Password:<input type="password" name="password" id="password">
            <font color="red"><div id="passworderrortext"></div></font>
            <br/><input type="submit" value="Submit">
            </form>
        </center>
    </body>
</html>

这里需要帮助。

【问题讨论】：

在 chrome 上加载 jsp 并检查页面（右键单击并点击检查元素）。看看你能不能解决这个问题。否则将问题放在这里。
您遇到的任何错误，请尝试查看您的浏览器控制台，如果您使用的是 chrome，请检查元素并查看是否有任何错误。如果有，请告诉我们
定义不工作。您在 javascript 控制台中看到的错误是什么？
您是否尝试过使用<script type="text/javascript"> 而不仅仅是<script>？
使用 if(password==="") 进行比较，为什么要使用 jquery BTW 的旧 (1.5.2) 库。

标签： java jquery jsp

【解决方案1】：

这是更新后的 Jquery 代码：

$(document).ready(function() {

$("#username").on('focusout',function(){

var username = $("#username").val().trim();

if(username==="")
{    
     $("#usernameerrortext").html("Username should not be empty");
     return false;
}
else if(/[!@#$%\\^&*(){}[\]<>?\/|\-]/.test(username))
{
    $("#usernameerrortext").html("Username should not contain special charatcers");
    return false;
}
else
{
    $("#usernameerrortext").html("");
    return true;
}
});

$("#password").on('focusout',function(){
var password = $("#password").val().trim();

if(password==="")
{
     $("#passworderrortext").html("Password should not be empty");
     return false;
}
else
{
    $("#passworderrortext").html("");
    return true;
}
});
});

我在这里为你创建了一个演示小提琴FIDDLE

您需要在要运行此脚本的页面的 head 标记中包含 jquery 库。

为此无需做太多，只需在头标签<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">中添加这一行

【讨论】：

我认为@kalai 没有脚本问题。当文件扩展名为 .jsp 时，浏览器中不会显示任何内容。如果它是 .html，那么它可以工作。您已经在 FIDDLE 中编写了 html 代码。
kalai 提供的脚本在 html 页面上也不起作用。我只是复制粘贴了@kalai 发布的 html 代码以检查 Jquery。
实际上 kalai 并没有准确地提到这个问题。是脚本问题还是扩展问题。
问题是我不知道使用 jquery 插件。你能告诉我如何解决它。为了运行我的 jquery，我需要在我的动态 Web 项目中添加什么吗？我想我是从ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js 获取资源的，所以我不需要添加任何看起来的东西。如果我错了，请纠正我