PUT XMLHttpRequest 在控制台返回空答案

【问题标题】：PUT XMLHttpRequest returns an empty at consolePUT XMLHttpRequest 在控制台返回空
【发布时间】：2021-11-08 08:44:49
【问题描述】：

我正在尝试通过XMLHttpRequest 发送PUT 请求，但它返回一个空的，前端使用JS，后端使用nodejs。而在开发工具的网络部分，它显示 PUT 是 ok 。我已经处理这个问题超过 10 天了，我们将不胜感激每一点支持。我真的需要这个，因为我不知道下一步该做什么。快把我逼疯了。

下面是我的html

<body>
    <form action="location.js" id="myLocation" method="PUT">
        <br>
        <div>
            <label> location </label>
            <input id="location" type="text" name="location" required>
        </div>
        <br>
        <div>
            <button type=submit>submit</button>
        </div>
    </form>
    <div id="locate">

    </div>

    <a href="login.html"> GO TO LOGIN </a>

    <script src="location.js"> </script>
    <script src=""> </script>
</body>

接下来是XMLHttpRequest的JS

var form = document.getElementById('myLocation');
var display = document.getElementById('locate');

form.addEventListener('submit', sendData);

function sendData(e) {
    e.preventDefault();

    var location = document.getElementById('location').value;
    var params = JSON.stringify({
        "location": location
    });

    var val = params;

    const XHR = new XMLHttpRequest();
    XHR.onload = function () { 
        var out1 = this.responseText;
        
        display.innerHTML = out1;

        console.log(out1);
    };
    
    XHR.open('PUT', 'http://localhost:5000/parcel/:id/location', true);
    XHR.setRequestHeader('Content-type', 'application/json; charset=utf-8');
    XHR.setRequestHeader('Method', 'PUT');
  
    XHR.send(val);
}

下面是 PUT 请求的 API 路由器：

router.put('/:id/location', async (req, res) => {
    res.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
    res.setHeader("Access-Control-Allow-Headers", "Content-Type, application/json;charset=utf-8");
    res.setHeader("Access-Control-Allow-Method", "PUT");

    let parcels

    try {
        const {_id} = req.params.id;
        const {location} = req.body.location;

        parcels = await parcel.findByIdAndUpdate(_id, location);
        
        res.send(parcels);
    } catch (err) {
        console.log(err);

        if (parcels == null) {
            res.send('error nul')
        } else{
            res.send('unsuccesful')
        }
    }
});

【问题讨论】：

PUT 请求不应返回任何内容。为了验证 PUT 请求是否成功，您需要检查 HTTP 状态 - source
哇，非常感谢您提供这些信息。我检查了 HTTP 状态，它在 PUT 上显示 200 表示 OK，但旧值不会更改为新值。

标签： javascript node.js express

【解决方案1】：

XHR.open('PUT', 'http://localhost:5000/parcel/:id/location', true);

我认为:id 不在这里。

编辑：

:id 是一个“路由参数”。侦听器可以使用它来覆盖一系列路由。

因此，如果您的 API 在/parcel/0001/location 或/parcel/asd/location 上获得GET request，则/parcel/:id/location 处理程序可以响应所有这些，您可以从req.params.id 读取id。

只有在客户端已经知道:id的情况下才能使用此功能，并且可以将其构建到路由中，例如："http://localhost:5000/parcel/"+id+"/location"。

【讨论】：

我也有同样的想法，但我是新手。你能解释一下我怎样才能最好地完成它吗？
:id 是一个“路由参数”。侦听器可以使用它来覆盖一系列路由。因此，如果您的 API 在/parcel/0001/location 或/parcel/asd/location 上获得GET request，则/parcel/:id/location 处理程序可以响应所有这些，并且您可以从req.params.id 读取id。如果您在客户端已经知道:id，则只能使用此功能，并且可以将其构建到路由中，例如："http://localhost:5000/parcel/"+id+"/location"。
哇，非常感谢您提供这些信息。在我执行该步骤之后，它在通过 Chrome 上的 devtool 检查时是成功的，但是我要更新的数据并没有从旧值改变。我现在领先一步，仍然希望有更好的功能。
有使用XMLHttpRequest的理由吗？ XML 和 JSON 是不同的格式。我通常使用一个名为 axios 的包来处理 Http 请求。
让我们continue this discussion in chat.