为什么XMLHttpRequest PUT请求不起作用?

时间:2020-02-28 10:24:42

标签: javascript html node.js api xmlhttprequest

我有一个简单的 NODEJS API ,在我的控制器中具有基本的 CRUD 操作。

但是,所有请求方法( PUT )似乎都可以使用。我只是对PUT方法有疑问。

这是 API端代码:

app.put('/api/prodotti/:Id', function (req, res) {
connection.query("UPDATE Prodotti SET Descrizione=?, Prezzo=?, Categoria=? WHERE Id=?", [req.body.Descrizione, req.body.Prezzo, req.body.Categoria, req.params.Id], function (error, result) {
    if (error)
        res.send("Errore query: " + error.message);
    if (result.changedRows == 0)
        res.send("Non modificato!");

    console.log("Id modificato: " + req.params.Id);
    res.json(req.params.Id);
});
});

这是我的 HTML页面(客户端)端:

<form>
        <label>Id</label>
        <br />
        <input id="Mid" type="number" name="Id"/>
        <br />
        <label>Descrizione</label>
        <br />
        <input id="Mdescrizione" type="text" name="Descrizione" />
        <br />
        <label>Prezzo</label>
        <br />
        <input id="Mprezzo" type="number" name="Prezzo" />
        <br />
        <label>Categoria</label>
        <br />
        <select id="Mcategoria" name="Categoria">
            <option value="Categoria 1">Categoria 1</option>
            <option value="Categoria 2">Categoria 2</option>
            <option value="Categoria 3">Categoria 3</option>
            <option value="Categoria 4">Categoria 4</option>
            <option value="Categoria 5">Categoria 5</option>
        </select>
        <br />
        <br />
        <button type="button" onclick="UpdateProdotti();"> Modifica </button>
        <input type="reset" value="Reset campi" />
    </form>

和onclick 功能

function UpdateProdotti() {
        var id = document.getElementById("Mid").value;
        var descrizione = document.getElementById("Mdescrizione").value;
        var prezzo = document.getElementById("Mprezzo").value;
        var categoria = document.getElementById("Mcategoria").value;

        data = {};
        data.Descrizione = descrizione;
        data.Prezzo = prezzo;
        data.Categoria = categoria;

        var json = JSON.stringify(data);

        var xhr = new XMLHttpRequest();
        xhr.setRequestHeader('Content-type','application/json; charset=utf-8');

        xhr.open("PUT", "api/prodotti/" + id, true);
        xhr.onload = function () {
            if (this.readyState == 4 && this.status == 200) {
                alert("Modificato " + xhr.responseText);
            }
        }

        xhr.send(json);
    }

我能够提出所有其他要求并轻松获得响应。我知道单击按钮时会调用UpdateProdotti函数,但是即使我向API添加断点,也永远不会收到请求。

感谢您的帮助。

0 个答案:

没有答案