如何在不离开当前页面的情况下将数据发布到服务器？

Question

我想要的是有一个JavaScript函数，它可以将POST发送到任意站点，并将整个时间保留在“执行时间”的网站上。它不一定要用表格来完成！

我不想使用jQuery，如果可能的话。

我该怎么做？

Answer 1

您可以“防止”默认行为。

<form id="myform"> 
    Name: <input id="name" type="text" value="onur" /><br /> 
    Email: <input id="email" type="text" value="onur@email.com" /><br /> 
    <br /> 
    <button type="submit">type=submit</button> 
    <button type="button" onclick="form.submit()">form.submit()</button> 
</form> 

在</body>标记之前（或DOM准备就绪）;

var form = document.getElementById('myform'); 
function onSubmit(event) { 
    if (event) { event.preventDefault(); } 
    console.log('submitting'); 
    postFormData(form); // <-------- see below 
} 
// prevent when a submit button is clicked 
form.addEventListener('submit', onSubmit, false); 
// prevent submit() calls by overwriting the method 
form.submit = onSubmit; 

Fiddle here

编辑：
的form.submit()默认行为将页面重定向到URL form.action。这是您如何在不重定向到其他页面的情况下模拟默认行为的方法。

而且因为你想 “POST” 的形式，这里是方法（AJAX的东西）：

function postFormData(form) { 
    var xhr = new XMLHttpRequest(), 
     formData = urlEncodeFormData(form); // see below 

    // set XHR headers 
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); 
    // watch for state changes 
    xhr.onreadystatechange = function() { 
     if (xhr.readyState === 4 && xhr.status === 200) { 
      console.log(xhr.responseText); 
      // This is where you show a success message to the user 
     } 
    }; 
    // open and send the post request 
    xhr.open('POST', 'https://myweb.com/action-target', true); 
    xhr.send(formData); 
} 

// You could use the FormData API if the browser supports it. 
// Below is somewhat alternate and should be improved to support more form element types. 
function urlEncodeFormData(form) { 
    var i, e, data = []; 
    for (i = 0; i < form.elements.length; i++) { 
     e = form.elements[i]; 
     if (e.type !== 'button' && e.type !== 'submit') { 
      data.push(encodeURIComponent(e.id) + '=' + encodeURIComponent(e.value)); 
     } 
    } 
    return data.join('&'); 
} 

参见：

• MDN — Using XMLHttpRequest
• MDN — FormData
• Can I Use FormData?

Answer 2

为您的表单提供一个返回false的onsubmit处理函数。做任何你需要在那里做的处理（例如：阿贾克斯发送数据或你有什么）

代码的未经测试，但这里的一般想法。

function doFormThings() { 
    //processing form here 
    return false; //don't actually redirect, browser, I'm watching you 
}; 

<form onsubmit="return doFormThings();"> 

Answer 3

由于您正在动态创建表单，因此您可以在iframe中创建它并将其提交到iframe中 - 这样您就不会离开当前页面，而实际上会使用标准表单提交。这是一个工作示例：

function generateFormAndSubmit() 
{ 
    // Create an input for the form 
    var input = document.createElement('input'); 
    input.type = 'hidden'; 
    input.name = 'test' 
    input.value = '123'; 

    // Create the form itself 
    var form = document.createElement('form'); 
    form.action = '/myaction'; 

    // Append the created input to the form 
    form.appendChild(input); 

    // Create the iframe that will hold the form 
    var iframe = document.createElement('iframe'); 

    // Make it offscreen, so it's not visible for the user 
    iframe.style.cssText = 'width: 1px;height: 1px;position: absolute;top: -10px;left: -10px'; 

    // Append the iframe to our document 
    document.body.appendChild(iframe); 

    // Append the form to the iframe 
    iframe.contentDocument.body.appendChild(form); 

    // Submit the form 
    form.submit(); 
} 

你可以调用的形式从另一个地方提交，当然，就像一个按钮的例子 - iframe是你的，所以你可以操纵（搜索形式，修改，提交等等）它是任何时候的内容 - 不适用任何安全限制。

如果您需要提交的结果，那么它有点复杂 - 首先，表单的动作需要指向同一个域。然后，如果这是真的，你只需要监听iframe的加载时间，并从内容中读取结果（打印在JS文档中或以某种方式解析DOM）。

Answer 4

您可以简单地使用iframe并更改表单的目标以将数据发布到其中。例如：

<form method='POST' target='hd-submit'> 
    <input name='firstName' placeholder='First Name' type='text' /> 
    <input name='lastName' placeholder='Last Name' type='text' /> 
    <input type='submit' value='Send' /> 
</form> 
<iframe name='hd-submit' hidden></iframe>