如何在不離開當前頁面的情況下將數據發佈到服務器？

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>