我如何調用 API 並在 javascript 中使用數據庫檢查用戶名和密碼？

Question

我正在創建一個 Web 應用程序，它有一個登錄表單供用戶登錄到他們的用戶門戶。 我們使用 Amazon DynamoDB 數據庫來存儲所有信息。 我已經設置了所有登錄頁面，並且能夠將登錄表單上的所有用戶輸入數據轉換為 JSON 對象。 現在我正在嘗試調用數據庫 URL (localhost:8080/user) 並想檢查用戶輸入的用戶名和密碼是否正確並與數據庫中的用戶匹配。 如果不是，我們需要返回一條錯誤消息來重試。

我知道我需要使用 GET 請求來執行驗證部分，但我對如何在 javascript 中編寫所有這些代碼感到非常困惑。

這是我的 Login.html 代碼，它的底部一直是 javascript。

    <!DOCTYPE html>
<html lan="en" and dir="Itr">
<head>
    <meta charset="utf=8">
    <title> Login Page Form </title>
    <link rel="stylesheet" href="loginStyle.css">
</head>
<body>
    <form class="login_page" action="login.html" method="POST">

        <h1>
            PennySight Login
        </h1>
        <input type="text" name="" placeholder="Enter Username" id="username">
        <input type="password" name="" placeholder="Enter Password" id="password">
        <!-- <input type="submit" name="" value="Login" id="btn"> -->
        <button id="btn">Login</button>
    <div id="msg">
        <pre></pre>
    </div>
    </form>

<script>

// example {id:3214125124, name: 'Mark', lastName: joe}

const addUser = (ev)=>
{
    ev.preventDefault(); //to stop the form submitting
    let user = 
    {
        id: Date.now(),
        username: document.getElementById('username').value,
        password: document.getElementById('password').value
    }
    document.forms[0].reset();

    console.warn('added', {user} );
    let pre = document.querySelector('#msg pre');
    pre.textContent = '\n' + JSON.stringify(user, '\t', 2);
    

}
document.addEventListener('DOMContentLoaded', ()=>{
    document.getElementById('btn').addEventListener('click', addUser);
});

</script>

任何幫助或指導將不勝感激。 謝謝

Answer 1

如果您需要執行 GET 請求，有 2 個選項：

向服務器執行 GET 請求的方法：

1. 獲取API

Fetch API 最簡單，因為它非常易於使用。

它使用Promises的概念，所以你會做這樣的事情：

 fetch('https://jsonplaceholder.typicode.com/todos/1') //the url .then(response => response.json()) //get json response .then(data => { // do what you want to with "data", the result here console.log(data); })

2. XMLHttpRequest

如果返回的結果不是 JSON，則必須使用一種新方法：XHR

所有主要瀏覽器都支持它（IE 5-6 除外）。 有很多使用方法，我最喜歡的是：

 function reqListener () { console.log(this.responseText); } var oReq = new XMLHttpRequest(); oReq.addEventListener("load", reqListener); oReq.open("GET", "https://jsonplaceholder.typicode.com"); // url oReq.send();

這就是使用 JS 執行 GET 請求的方式。 當然，這不是直截了當的解決方案，但請嘗試使用這些解決方案。

我如何調用 API 並在 javascript 中使用數據庫檢查用戶名和密碼？

問題描述

1 個解決方案

解決方案1
-1 2021-11-04 20:48:36

向服務器執行 GET 請求的方法：

1. 獲取API

2. XMLHttpRequest

我如何調用 API 並在 javascript 中使用數據庫檢查用戶名和密碼？

問題描述

1 個解決方案

解決方案1 -1 2021-11-04 20:48:36

向服務器執行 GET 請求的方法：

1. 獲取API

2. XMLHttpRequest

解決方案1
-1 2021-11-04 20:48:36