你知道JavaScript有内置的方法和库来创建和提交表单吗?

我在这里看到很多回复都要求使用第三方库，我认为这是多余的。

我将在纯Javascript中做以下工作:

<script>
function launchMyForm()
{
   var myForm = document.createElement("FORM");
   myForm.setAttribute("id","TestForm");
   document.body.appendChild(myForm);

// this will create a new FORM which is mapped to the Java Object of myForm, with an id of TestForm. Equivalent to: <form id="TestForm"></form>

   var myInput = document.createElement("INPUT");
   myInput.setAttribute("id","MyInput");
   myInput.setAttribute("type","text");
   myInput.setAttribute("value","Heider");
   document.getElementById("TestForm").appendChild(myInput);
   
// To submit the form: 
   myForm.method = "POST";
   myForm.action = "whatever.aspx";  // or "response.php" 
   myForm.submit();

// This will create an INPUT equivalent to: <INPUT id="MyInput" type="text" value="Heider" /> and then assign it to be inside the TestForm tags. 
}
</script>

这样(A)你就不需要依靠第三方来做这项工作。(B)所有浏览器都内置它，(C)更快，(D)它有效，请随意试用。

我希望这能有所帮助。

H

这里有一个很好的函数，你(或其他人)可以在他们的代码中使用:

function post(url, data) {
    return new Promise((res, rej) => {
        let stringified = "";
        for (const [key, value] of Object.entries(data))
            stringified += `${stringified != '' ? '&' : ''}${key}=${value}`

        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
            if (xhr.readyState == 4)
                if (xhr.status == 200)
                    res(xhr.responseText)
                else
                    rej({ code: xhr.status, text: xhr.responseText })
        }
        xhr.open("POST", url, true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.send(stringified);
    })
}

领航员sendBeacon()。

如果你只是需要POST数据，不需要服务器的响应，最短的解决方案是使用navigator.sendBeacon():

const data = JSON.stringify({
  example_1: 123,
  example_2: 'Hello, world!',
});

navigator.sendBeacon('example.php', data);

你知道JavaScript有内置的方法和库来创建和提交表单吗?

我在这里看到很多回复都要求使用第三方库，我认为这是多余的。

我将在纯Javascript中做以下工作:

<script>
function launchMyForm()
{
   var myForm = document.createElement("FORM");
   myForm.setAttribute("id","TestForm");
   document.body.appendChild(myForm);

// this will create a new FORM which is mapped to the Java Object of myForm, with an id of TestForm. Equivalent to: <form id="TestForm"></form>

   var myInput = document.createElement("INPUT");
   myInput.setAttribute("id","MyInput");
   myInput.setAttribute("type","text");
   myInput.setAttribute("value","Heider");
   document.getElementById("TestForm").appendChild(myInput);
   
// To submit the form: 
   myForm.method = "POST";
   myForm.action = "whatever.aspx";  // or "response.php" 
   myForm.submit();

// This will create an INPUT equivalent to: <INPUT id="MyInput" type="text" value="Heider" /> and then assign it to be inside the TestForm tags. 
}
</script>

这样(A)你就不需要依靠第三方来做这项工作。(B)所有浏览器都内置它，(C)更快，(D)它有效，请随意试用。

我希望这能有所帮助。

H

你可以使用XMLHttpRequest, fetch API，… 如果您想使用XMLHttpRequest，可以执行以下操作

var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
    name: "Deska",
    email: "deska@gmail.com",
    phone: "342234553"
 }));
xhr.onload = function() {
    var data = JSON.parse(this.responseText);
    console.log(data);
};

或者如果你想使用取回API

fetch(url, {
    method:"POST",
    body: JSON.stringify({
        name: "Deska",
        email: "deska@gmail.com",
        phone: "342234553"
        })
    }).then(result => {
        // do something with the result
        console.log("Completed with result:", result);
    }).catch(err => {
        // if any error occured, then catch it here
        console.error(err);
    });

这里最流行的答案没有显示如何从POST中获取数据。此外，流行的“fetch”解决方案在最新版本的Chrome中无法工作，当发送数据到最新版本的NodeJS时，除非你传递报头并打开response.json()承诺。此外，流行的答案不使用async/await。

这是我能想到的最干净、最完整的解决方案。

async function postJsonData(jsonObject) {
    const response = await fetch("/echo", {
        method: "POST",
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(jsonObject)
    });
    
    const actualResponse = await response.json();
}