Блог

Главная - Вопросы по программированию - Обещание API извлечения — соединение JavaScript и HTML

Обещание API извлечения — соединение JavaScript и HTML

#javascript #html #css #api #post

Вопрос:

Я очень новичок в HTML и JavaScript. Я создал очень простую HTML-страницу для входа в систему. Код такой, как показано ниже.

 <html>
    <head>
        <body>
            <form>
                <p>Username</p>
                <input type='text' name="" placeholder="Enter Username/Email ID">
                <p> Password</p>
                <input type='password' name="" placeholder="Enter Password">
                <input type='submit' name="" value="LogIn the User">
            </form>         
        </body>
    </head>
</html>

Теперь у меня есть RESTful API с функциями входа в систему. Я могу отправить значения имени пользователя и пароля для тестирования API в POSTMAN в формате json.

введите описание изображения здесь

Теперь мой вопрос в том, как я могу подключить остальную часть API входа в систему к моей HTML-странице. Если это дублирующий вопрос, пожалуйста, приведите меня к исходному. Кроме того, если вы можете предложить некоторые ресурсы. Я прошел через многое, но не смог найти ничего подходящего. Спасибо.

Ответ №1:

Основными шагами будут следующие:

  1. перехватить событие отправки в форме
  2. проанализируйте форму, чтобы создать JSON, который вы хотите отправить
  3. отправьте json
  4. сделайте что-нибудь с ответом
 document.forms[0].addEventListener('submit', function(e) { // when they submit
    e.preventDefault(); // Don't try and submit the form the traditional way
    const data = {
        username: e.target.querySelector('input[name="username"]').value,
        password: e.target.querySelector('input[name="password"]').value
    } // get the JSON we want to submit
    fetch('/auth/login', {
        method: 'post', // submit it as a post request
        body: JSON.stringify(data)
    }).then(function(response) {
        return response.json(); // parse the response as json
    }).then(function(data) {
        console.log('do something with the response');
    });
}); 
 <html>
    <head>
        <body>
            <form>
                <p>Username</p>
                <input type='text' name="username" placeholder="Enter Username/Email ID">
                <p> Password</p>
                <input type='password' name="password" placeholder="Enter Password">
                <input type='submit' value="LogIn the User">
            </form>         
        </body>
    </head>
</html>
Метки: