Question

我正在学习前端开发，目前正与另外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不是一个函数。我错过了什么吗？如果有任何帮助，我将不胜感激。

谢谢！

Answer 1

您必须通过其标记附上所有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>

使用javascript获取用户和密码身份验证（初学者）

1 个答案: