javascript - 单击按钮时如何使用 POST 请求提交表单输入数据？

Question

到目前为止，我有一个获得 2 个输入的基本表单。提交按钮成功地将新记录添加到 SQLite 数据库，但使用来自输入元素的值。我肯定错过了如何在我的 JavaScript 代码中正确设置它，但我只是不知道如何实现它。

JavaScript

var xhttp = new XMLHttpRequest();

const items_url = "http://127.0.0.1:3000/items"

function addingItems(){
    xhttp.open("POST", items_url, true);
    // Value implementation here maybe...
    console.log("Form button has been clicked for item entry submission");
    console.log(xhttp);
    xhttp.send();
}   

HTML

<form method="POST" class="addItem">
    <input type="text" placeholder="Title" name="item_title" required>
    <input type="text" placeholder="Number" name="item_number" required>
    <button id="submitItem" type="submit" form="addItem" value="Submit" onclick="addingItems()">Submit</button>
</form>

如果您需要更多信息，请告诉我。

标签： javascripthtmlformspostxmlhttprequest

Answer 1

您需要FormData在 JavaScript 中添加到 ajax 对象：

var xhttp = new XMLHttpRequest();

const items_url = "http://127.0.0.1:3000/items"

function addingItems(){
    xhttp.open("POST", items_url, true);
    console.log("Form button has been clicked for item entry submission");
    console.log(xhttp);
    var form=new FormData()
    form.append("item_title",document.getElementsByName("item_title")[0].value)
    form.append("item_number",document.getElementsByName("item_number")[0].value)
    xhttp.send(form);
}

<form method="POST" class="addItem">
    <input type="text" placeholder="Title" name="item_title" required>
    <input type="text" placeholder="Number" name="item_number" required>
    <button id="submitItem" value="Submit" onclick="addingItems()">Submit</button>
</form>