Javascript 单击按钮时，如何提交带有POST请求的表单输入数据？

到目前为止，我有一个基本的表单，它有两个输入。submit按钮成功地将新记录添加到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" 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>

现在大多数浏览器都支持

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);
} 

我不知道后者是否能正常工作，可能需要调试一点。

试试看

<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>

现在大多数浏览器都支持

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);
} 

我不知道后者是否能正常工作，可能需要调试一点。

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

---

使用

您需要在JavaScript中向ajax对象添加

FormData

：

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);
}

提交

您需要在JavaScript中向ajax对象添加

FormData

：

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);
}

提交

谢谢。我已经实现了上述功能，但现在在单击“提交”时遇到了此错误：

错误响应错误代码：501消息：不支持的方法（'POST'）。错误代码说明：HTTPStatus.NOT_IMPLEMENTED-服务器不支持此操作。

谢谢。我已经实现了上述功能，但现在在单击“提交”时遇到了此错误：

错误响应错误代码：501消息：不支持的方法（'POST'）。错误代码说明：HTTPStatus.NOT_IMPLEMENTED-服务器不支持此操作。