时间戳

首页 > 解决方案 > 使用 Fetch API 创建登录表单

javascript - 使用 Fetch API 创建登录表单

问题描述

所以，我正在制作一个登录表单，并且我已经实现了 fetch API

const form = {
    email: document.querySelector("#signin-email"),
    password: document.querySelector("#signin-password"),
    submit: document.querySelector("#signin-btn-submit"),
    messages:document.getElementById("form-messages")
};
let button = form.submit.addEventListener("click", (e)=> {
    e.preventDefault();
    const login = 'https://ffcc-app.herokuapp.com/user/login';

    fetch(login, {
          method: "POST",
          headers: {
            Accept: "application/json, text/plain, */*",
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            email: form.email.value,
            password: form.password.value,
          }),
        })
          .then((response) => response.json())
          .then((data) => console.log(data))
          .catch((err) => {
            console.log(err);
           });
    
    
});

我也得到了想要的输出： 这是我的输出

问题是当“登录成功”时我必须重定向到主页，否则我必须显示一条消息说“用户不存在”。我该怎么做？我还应该在我的代码中添加什么？

标签： javascriptajaxfetch-api

解决方案

const form = {
  email: document.querySelector("#signin-email"),
  password: document.querySelector("#signin-password"),
  submit: document.querySelector("#signin-btn-submit"),
  messages: document.getElementById("form-messages"),
};
let button = form.submit.addEventListener("click", (e) => {
  e.preventDefault();
  const login = "https://ffcc-app.herokuapp.com/user/login";

  fetch(login, {
    method: "POST",
    headers: {
      Accept: "application/json, text/plain, */*",
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      email: form.email.value,
      password: form.password.value,
    }),
  })
    .then((response) => response.json())
    .then((data) => {
      console.log(data);
      // code here //
      if (data.error) {
        alert("Error Password or Username"); /*displays error message*/
      } else {
        window.open(
          "target.html"
        ); /*opens the target page while Id & password matches*/
      }
    })
    .catch((err) => {
      console.log(err);
    });
});

如您的屏幕截图https://i.stack.imgur.com/WJBh2.png中所述，由 data.error 处理的登录成功和错误

推荐阅读