我试图获取用户名并在 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>
最佳答案
您似乎没有将 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>关于javascript - 未捕获的语法错误 : Invalid or unexpected token even with correct syntax，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40901644/