我正在学习前端开发，目前正在与其他 5 名同事一起开发一个项目。我必须实现登录页面。我们还必须实现注册和注销页面。这是登录页面的 html 和 js 代码的一部分：
<script src="../models/Auth.js" type="text/javascript"></script>
<body>
<div class="login-box">
<h1>Login here</h1>
<form>
<p id ="Username">Username</p>
<input type= "text" placeholder = "Enter Username">
<p id ="Password">Password</p>
<input type= "password" placeholder =" Enter Password">
<input type="submit" id="submitButton" value ="Login">
<a href="#"> Lost your password?</a><br>
<a href="#"> Don't have an account?</a>
</form>
</div>
(Javascript)
window.addEventListener("load",function (){
var username = document.getElementById("Username");
var password = document.getElementById("Password");
var submit=document.getElementById("submitButton");
var messageContainer=document.getElementById("Login");
var auth =new Auth();
submit.addEventListener("click",function ()
{
var username = document.getElementById("Username").value;
var password = document.getElementById("Password").value;
});
auth.Login();
auth.Login(username,password)
.then(function(response){
const token=response.accessToken;
auth.login(auth.Token);
auth.token=token;
document.cookie="accessToken="+token;
console.log(response.accessToken);
})
.catch(function(e) {
console.log(e) ;
loginContainer.innerHTML=e.status+ " You have to be registered in order to
login";
});
});
function Auth(){
}
Auth.prototype.Login=function(Username, Password){
var root = 'https://ancient-caverns-16784.herokuapp.com';
return $.post(root+"/auth/login",{
username: 'test',
password: 'test'
},
function(response) {
var xmlhttp = new XMLHttpRequest();
console.log(xmlhttp);
xmlhttp.open("post", "Login", true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 401 && xmlhttp.status == 200) {
loginResults();
}
};
console.log(response);
});
};
据我了解，我只需要将用户名和密码添加到Auth函数中即可。我收到一条错误消息： auth.login 不是函数。我错过了什么吗？我将不胜感激提供的任何帮助。
谢谢！
您必须通过其标签将所有 javascript 代码括起来。例如：
<script>
window.addEventListener("load",function (){
var username = document.getElementById("Username");
var password = document.getElementById("Password");
var submit=document.getElementById("submitButton");
var messageContainer=document.getElementById("Login");
var auth =new Auth();
submit.addEventListener("click",function ()
{
var username = document.getElementById("Username").value;
var password = document.getElementById("Password").value;
});
auth.Login();
auth.Login(username,password)
.then(function(response){
const token=response.accessToken;
auth.login(auth.Token);
auth.token=token;
document.cookie="accessToken="+token;
console.log(response.accessToken);
})
.catch(function(e) {
console.log(e) ;
loginContainer.innerHTML=e.status+ " You have to be registered in order to
login";
});
});
function Auth(){
}
Auth.prototype.Login=function(Username, Password){
var root = 'https://ancient-caverns-16784.herokuapp.com';
return $.post(root+"/auth/login",{
username: 'test',
password: 'test'
},
function(response) {
var xmlhttp = new XMLHttpRequest();
console.log(xmlhttp);
xmlhttp.open("post", "Login", true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 401 && xmlhttp.status == 200) {
loginResults();
}
};
console.log(response);
});
};
</script>
<input type="submit" id="submitButton" value ="Login">
<a href="#"> Lost your password?</a><br>
<a href="#"> Don't have an account?</a>
</form>