未捕获的 SyntaxError：即使语法正确，令牌也无效或意外答案

【问题标题】：Uncaught SyntaxError: Invalid or unexpected token even with correct syntax未捕获的 SyntaxError：即使语法正确，令牌也无效或意外
【发布时间】：2017-04-15 13:26:32
【问题描述】：

我正在尝试获取用户名并在 html 页面中使用 javascript 将其定向到另一个页面。我只是遵循提到的方法 here ，但是，我在代码下面提到的行中遇到语法错误。我检查了 jQuery API 文档上的语法，它看起来是正确的。谁能检查它为什么会抛出错误？另外，如果我必须在单击提交按钮后重定向页面，我是否朝着正确的方向前进？

<!DOCTYPE html>
<html>
<head>  
<title>Login Page</title>
<style type="text/css">
        html,body{height: 100%; padding:0; margin:0;}
        form{ width:30em;height:9em; margin:-5em auto 0 auto; position: relative; top:50%; border:1px dotted #ccc; padding:.25em; }
        fieldset{ margin:0;   border:0;padding:0;}
        legend{float:left; font-size: 200%; text-align: center; color:blue; font-weight: bold; border-bottom: 1px solid blue; width:15em;  padding:0; }
        label, label+ input {display:inline; float:left;margin-top:1em;}
        label{text-align: right; width:28%; clear: left; margin-top:.8em; }
        label+ input{ width:60%; padding:.25em; ; margin-left:.5em; border: 1px inset;  margin-left: }
        #sub{  margin-top:1em; position: relative; float:left;clear: left; margin-left: 29%}
</style>
</head>
<body>

    <form >
        <fieldset><legend>My Login</legend>
            <label for="name">UserName: </label><input  type="text" name="username" id="username" value="">
            <label for="password">Password: </label><input  type="password" name="password" id="password" >
            <input type="button" name="theButton" value="Submit" class="btn" data-username="username" />
        </fieldset> 
    </form>

<script>

console.log("Am I present?");

$(document).on('click', '.btn', function() {

    console.log("Am I Inside?");

    var name = $(this).data('username');        
    if (name != undefined && name != null) {
        window.location = 'http://localhost/local/RegistryWS/src/main/webapp/home.html?username=' + name;
    }
});// Getting Syantax error here at developers console



</script>


</body>
</html>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您似乎没有将 jquery 库加载到文档中：

将其添加到头部：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

以下只是您的现有代码进行了更改（以及将单击功能包装在文档就绪包装器中），它不会出错并在按钮单击时控制消息。

<!DOCTYPE html>
<html>
<head>  
<title>Login Page</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
        html,body{height: 100%; padding:0; margin:0;}
        form{ width:30em;height:9em; margin:-5em auto 0 auto; position: relative; top:50%; border:1px dotted #ccc; padding:.25em; }
        fieldset{ margin:0;   border:0;padding:0;}
        legend{float:left; font-size: 200%; text-align: center; color:blue; font-weight: bold; border-bottom: 1px solid blue; width:15em;  padding:0; }
        label, label+ input {display:inline; float:left;margin-top:1em;}
        label{text-align: right; width:28%; clear: left; margin-top:.8em; }
        label+ input{ width:60%; padding:.25em; ; margin-left:.5em; border: 1px inset;  margin-left: }
        #sub{  margin-top:1em; position: relative; float:left;clear: left; margin-left: 29%}
</style>
</head>
<body>

    <form >
        <fieldset><legend>My Login</legend>
            <label for="username">UserName: </label><input  type="text" name="username" id="username" value="">
            <label for="password">Password: </label><input  type="password" name="password" id="password" >
            <input type="button" name="theButton" value="Submit" class="btn" data-username="username" />
        </fieldset> 
    </form>

<script>

console.log("Am I present?");
$(document).ready(function(){
  $(document).on('click', '.btn', function() {
    var name = $('#username').val();
    console.log("Am I Inside?");
    console.log("name: " +name);
    if (name != undefined && name != null) {
        window.location = 'http://localhost/local/RegistryWS/src/main/webapp/home.html?username=' + name;
    }
  });
 });



</script>


</body>
</html>

【讨论】：

非常感谢。那行得通，它也在重定向。但是在重定向 URL 上，我看到了http://localhost/local/RegistryWS/src/main/webapp/home.html?username=username。你能告诉我为什么它没有捕捉到我在表格中输入的用户名吗？ data-username="username" 有什么问题吗？
哦-刚刚意识到那是因为 name 变量试图从按钮单击中找到数据属性。在 js 中更改它以获取用户名输入的值，它应该可以工作。当我得到一个秒时会更新我的答案。
更新了答案，因此它现在应该选择 p 名称的值并应用它。另请注意，您在名称输入中使用的 for="" 名称不正确。