How do I go about calling API and check username and password with Database in javascript?
Question
I am creating a web app that has a login form for user to login into their user portal. We are using Amazon DynamoDB Database to store all the information. I have the login page all set up and I was able to get all the user inputted data on the login form to be converted to JSON object. Now I am trying to call the database URL (localhost:8080/user) and want to check if the user entered username and password is correct and matches with a user in the database. If not we need to return an error message to retry.
I understand that I need to use a GET request to perform the validation part but I am very confused on how to go about coding all this in javascript.
Here is my Login.html code which has javascript all the way at the bottom.
<!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>
Any help or guidance would be much appreciated. Thank you
1 answers
solution1
-1 2021-11-04 20:48:36
If you need to perform a GET request, there are 2 options:
Ways to perform GET requests to a server:
1. Fetch API
The Fetch API is best for simplicity, because it's pretty easy to use.
It uses the concept of Promises , so you would do something like this:
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
If the result returned is not in JSON, you will have to use a new approach: the XHR
It is supported in all major browsers (except IE 5-6). There are many ways to use it, my favorite of which:
function reqListener () { console.log(this.responseText); } var oReq = new XMLHttpRequest(); oReq.addEventListener("load", reqListener); oReq.open("GET", "https://jsonplaceholder.typicode.com"); // url oReq.send();
So this is how you would perform a GET request using JS. Of course, this is not the straightforward solution, but try experimenting with these solutions.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.