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>

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

Answer 1

您需要向JavaScript中的ajax对象添加int：

int

FormData

Answer 2

尝试

<form method="POST" class="addItem" id="my-form-id">
    <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>

并且js函数为：

function addingItems(){
    xhttp.open("POST", items_url, true);
    var formData = new FormData( document.getElementById("my-form-id") );
    xhttp.send(formData);
}

现在大多数浏览器都支持FormData类，但是如果您以某些旧版浏览器为目标，则可以尝试以下操作：

function addingItems(){
    xhttp.open("POST", items_url, true);
    var input = document.getElementById("my-input-id");
    var inputData = encodeURIComponent(input.value);
    var postData = input.name + "=" + inputData;
    xhttp.send(postData);
}

我不知道后者是否可以正常使用，可能需要调试一下。

Answer 3

使用type =“ submit”将导致页面重新加载，您可以使用type =“ button”或event.preventDefault（）;来更改该行为。在您的addingsItems（）函数中。然后单击按钮，您可以调用一个函数，该函数将获取表单数据并将其发送到服务器以下是可用来实现目标的链接。使用AJAX 使用XMLHttpRequest

单击按钮后，如何通过POST请求提交表单输入数据？

3 个答案: