时间戳

首页 > 解决方案 > 使用 fetch js 发送两次 POST 请求

javascript - 使用 fetch js 发送两次 POST 请求

问题描述

我使用 fetch 调用带有 javascript 的 POST 方法，检查了我的服务器日志并看到这些行：

2020-02-08,14:07:21 [WARNING] (web.py:web:1618): 400 POST /login (::1): Missing argument username
2020-02-08,14:07:21 [WARNING] (web.py:web:2106): 400 POST /login (::1) 8.64ms
...
2020-02-08,14:07:21 [DEBUG] (base_handler.py:base_handler:123): Attempted Sign-in by asdas
2020-02-08,14:07:21 [INFO] (web.py:web:2106): 200 POST /login (::1) 6.07ms

这是发送请求然后在登录不成功时使用响应向页面添加文本的 js：

function ready(){

    function pwdSubmission(){
        const url = window.location.href;
        var result = document.getElementById("result-text");
        var username = document.getElementById("user").value;
        var password = document.getElementById("pwd").value;
        fetch(url, {method:"post", headers:{ 
        "Content-Type": "application/json",
        "Accept": "application/json"},
        body:{"username":username, "password":password}}
        ).then(function(data){
        if (data.status !== 200){
            result.style.color = '#d9534f';
        }
        return data.json()
        }).then(data =>
        result.innerText = data["message"])
    }

    var postbtn = document.getElementById("post-btn");
    postbtn.addEventListener("click", pwdSubmission)
}

那么为什么 POST 发送了两次，而第一次不包含参数。

更新即使没有字符串化，我的服务器从正文中获取参数也没有问题，但第一个请求中没有正文，只有第二个，所以我收到一个错误，将 json 发送回来

标签： javascript

解决方案

弄清楚了。我的输入被包装在一个form标签中，并且按钮默认为表单提交，所以我删除了这些标签，它现在只发送一次。

推荐阅读