时间戳

首页 > 解决方案 > 使用用户名和密码 JSON 登录

javascript - 使用用户名和密码 JSON 登录

问题描述

我有一个登录网页，我正在尝试使用 JavaScript 访问 JSON 文件并检查用户名和密码。虽然当我尝试这样做时，它给了我一个错误。

我尝试使用 if 语句来检查用户名和密码是否在 JSON 数据中，但这给了我一个未定义的错误。

onclick使用属性单击提交按钮时触发登录功能。JavaScript：

<div id="input">
    <input type="text" id="i1" placeholder="Username" />
    <input type="password" id="i2" placeholder="Password" />
    <input type="submit" id="sm" value="Log In" onclick="login()">
    </div>

i1 = document.getElementById("i1"); //username
i2 = document.getElementById("i2"); //password
sm = document.getElementById("sm"); //submit 


function login() {
    $.getJSON("json/login.json", function(jsdata) {
        json = jsdata;
        user = i1.value;
        password = i2.value;

        if (json.user[password]){
            console.log("success")
        }
               
    })
}

TypeError: json.user is undefined

登录.json：

{
    "potato48": "mypassword" 
}

我什至尝试了另一种方法：

JavaScript 2：

i1 = document.getElementById("i1"); //username
i2 = document.getElementById("i2"); //password
sm = document.getElementById("sm"); //submit 


function login() {
    $.getJSON("json/login.json", function(jsdata) {
        json = jsdata;
        user = i1.value;
        password = i2.value;
        if (user == json.user["username"] && password == json.user["password"]){
            console.log("success")
        }
               
    })
}

登录.json 2：

i1 = document.getElementById("i1"); //username
i2 = document.getElementById("i2"); //password
sm = document.getElementById("sm"); //submit 


{
    "potato48": {
        "username": "potato48",
        "password": "pwd"
    }
    
}

它仍然给我同样的错误。

标签： javascripthtmljsonauthentication

解决方案

JSON 只是一个字符串。需要解析 JSON 才能将其转换为 javascript 对象，然后您就可以读取密钥。

你可以尝试这样的事情：

function login() {
    $.getJSON("json/login.json", function(jsdata) {
        json = JSON.parse(jsdata);
        user = i1.value;
        password = i2.value;

        if (json.user[password]){
            console.log("success")
        }
               
    })
}

推荐阅读