使用 HTML、CSS 和 JavaScript Fetch 向 API 服务发出 POST 请求 [已关闭]

Question

我有一个关于使用 JavaScript API 的作业。我对 JavaScript API 一无所知。谁能帮我？我用 html CSS 代码编写了登录页面。但是第二阶段的作业：

单击登录页面上的登录按钮时，将使用 JavaScript 接收在用户名和密码输入中输入的值，并向此处的服务发送请求 https://fakestoreapi.com/docs#a -登录。当此服务收到响应时，将从登录页面重定向到仪表板页面。

我对这个软件很陌生，我搜索了一个视频来学习，但我找不到登录页面。谁能帮助我。

我能够仅使用 html CSS 创建登录页面。

Answer 1

这就是我的实现方式

myform.addEventListener("submit", function(evt) {
    evt.preventDefault();
    let fields = this.querySelectorAll("[name]");
    let obj = {};
    for (let field of fields) {
        obj[field.name] = field.value;
    }
    fetch('https://fakestoreapi.com/auth/login',{
            method:'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body:JSON.stringify(obj)
        })
            .then(res=>res.json())
            .then(json=>console.log(json))
});

<form id="myform">
    <input type="text" placeholder="username" name="username" value="mor_2314">
    <input type="password" placeholder="password" name="password" value="83r5^_">
    <input type="submit" value="login">
</form>

我为其创建了一个表单和一个提交事件。我在提交事件中阻止了 Default，因此我们不进行回发。我们还指定我们的值是 JSON 并将我们收集的值转换为 JSON。

Answer 2

请先查看此内容：

你在问题中说你使用html和css进行编码，所以应该有一个

<form>

属性，并且因为你不发送后端服务器，所以我想这会做：

<!DOCTYPE html>
<html>

<head>
  <script>
    document.addEventListener("DOMContentLoaded", function() {


      loginform.addEventListener("submit", function(event) {
        event.preventDefault()
        const username = document.getElementById("username").value;
        const password = document.getElementById("password").value;
        const data = {
          username,
          password
        }
        fetch('https://fakestoreapi.com/auth/login', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
          })
          .then(res => res.json())
          .then(json => console.log(json))
          .catch(err => console.log(err.message));
      });
    });
  </script>
</head>

<body>
  <form id="loginform">
    <input type="text" placeholder="username" id="username" name="username" value="mor_2314">
    <input type="text" placeholder="password" id="password" name="password" value="83r5^_">
    <input type="submit" value="login">
  </form>
</body>

</html>

此处提供的代码https://fakestoreapi.com/docs#a-login没有

header type

方法，请记住添加它。收到数据后，您应该更改代码在每个方法中的反应方式相应部分。

成功情况下，返回JSON格式：

失败的情况返回一个错误（并且看起来是一个 HTML 页面），所以我使用

.catch

来捕获它：

希望这有帮助！

使用 HTML、CSS 和 JavaScript Fetch 向 API 服务发出 POST 请求 [已关闭]

问题描述投票：0回答：2

2个回答

最新问题

使用 HTML、CSS 和 JavaScript Fetch 向 API 服务发出 POST 请求 [已关闭]

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2