如何在不离开当前页面的情况下post向服务器发送数据？

Question

我想要的是 JavaScript 功能，它可以将 POST 发送到任意站点并一直停留在站点 'it was executed on' 上。不一定要用表格来完成！

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

我该怎么做？

Answer 1

为您的表单提供一个 returns 错误的 onsubmit 处理程序。在那里做任何你需要做的处理（例如：ajax发送数据或你有什么）

代码未经测试，但这是总体思路。

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

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

Answer 2

您可以 "prevent" 默认行为。

<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() 的默认行为会将页面重定向到 form.action URL。这是一种在不重定向到另一个页面的情况下模拟默认行为的方法。

既然你想要 "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('&');
}

参见：

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 并将表单的目标更改为 post 将数据放入其中。例如：

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

如何在不离开当前页面的情况下post向服务器发送数据？

How do I post data to the server without leaving the current page?

javascript

forms

post

submit