問題描述
今天我遇到了一個有趣的錯誤，花了很多時間才弄清楚.
設置
頁面上的表單.提交時，數據被捕獲并用它創建 new FormData() 對象.
該對象通過 xhr 請求發送到 .php 腳本，然后返回 ok/error 消息.
代碼看起來像這樣:(簡化版，不需要絨毛)
將其發送到 .php 將產生一個如下所示的數組:
數組([名稱] =>一些名字[電子郵件] =>一些電子郵件[電話] =>11111111[網站] =>一些網站[詳情] =>一些細節[發送] =>發送)和 .php 將響應 {"message":"ok","code":0} 或 {"message":"error","代碼":1}
現在這是預期的行為.這是我在 Chrome、IE 或 Safari 上得到的.
問題
然而，在 Firefox 上，除了沒有 submit 輸入 (name="send") 鍵/值對之外，我得到相同的數組:
數組([名稱] =>一些名字[電子郵件] =>一些電子郵件[電話] =>11111111[網站] =>一些網站[詳情] =>一些細節)我在 Linux 和 Windows 上都嘗試過，以覆蓋我的基礎，但它仍然給出了同樣不令人滿意的結果.
解決方案
在網上搜索并出現空白后，我解決它的方法(更多的補丁，而不是真正解決)是覆蓋 send 鍵/值:
var data = new FormData(frm);data.append('發送', '發送');xhr.send(數據);這是可行的，因為如果它已經定義(Chrome 等......)它會被覆蓋，如果它不存在，它就會被創建.
問題
- 類似情況 - 您是否遇到過類似情況?
- 修復 - 我認為我的解決方案是 hack，您有什么更好的修復方法嗎?
根據 WHATWG 規范，FireFox 似乎是正確的.
FormDataXMLHttpRequest 規范> 構造函數說:
- 如果給出
form，則將fd的條目設置為 構造form的表單數據集.
那么在構造表單數據集的描述中，是這樣說的:
<塊引用>在提交者提交者的上下文中form可選地構造表單數據集的算法如下.如果沒有另外指定，提交者為空.
表單中的按鈕只有在提交者的情況下才會包含在表單數據集中.但是當這個算法從 FormData 構造函數中執行時，沒有指定提交者，所以表單數據集中不應該包含任何按鈕.
Today I came across an interesting bug, which took a good chunk of time to get to the bottom of.
The setup
A form on a page. On submit, the data gets captured and new FormData() object gets created with it.
That object gets sent with and xhr request to an .php script, which then returns an ok / error message.
The code looks something like this: (simplified version, no need for fluff)
<form name="frm" id="frm" action="" method="post" onsubmit="save(event, this);" enctype="multipart/form-data">
<input name="name" id="name" type="text" value="..." />
<input name="email" id="email" type="text" value="..." />
<input name="phone" id="phone" type="text" value="..." />
<input name="website" id="website" type="text" value="..." />
<textarea name="details" id="details"></textarea>
<input name="send" type="submit" value="Send" />
</form>
<script type="text/javascript">
function save(e, frm) {
if (document.getElementById('nume').value == '' ||
document.getElementById('email').value == '' ||
document.getElementById('telefon').value == '' ||
document.getElementById('site').value == '') {
alert('Forms empty');
} else {
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var r = JSON.parse(xhr.responseText);
if (r.code == 0) {
document.getElementById('message_ok').style.display = 'block';
} else {
document.getElementById('message_err').style.display = 'block';
}
}
};
xhr.open('POST', 'http://url', true);
var data = new FormData(frm);
xhr.send(data);
}
e.preventDefault();
}
</script>
Sending this to .php will result in an array which kind of looks like this:
Array
(
[name] => some name
[email] => some email
[phone] => 11111111
[website] => some site
[details] => some details
[send] => Send
)
and .php will respond with either {"message":"ok","code":0} or {"message":"error","code":1}
Now this is the expected behavior. This is what I get on either Chrome, IE or Safari.
The problem
On Firefox however, I get the same array except without the submit input (name="send") key/value pair:
Array
(
[name] => some name
[email] => some email
[phone] => 11111111
[website] => some site
[details] => some details
)
I tried on both Linux and Windows, to cover my basis, yet it still gave the same unsatisfying result.
Solution
After searching online and coming up empty, the way I solved it (more of patching, not really solving) was to overwrite the send key/value:
var data = new FormData(frm);
data.append('send', 'Send');
xhr.send(data);
This works, because if it's already defined (Chrome, etc...) it gets overwritten, if it doesn't exist, it gets created.
Questions
- Similar - Have you ever faced something similar?
- Fix - I consider my solution a hack, have you got any ideas for a better fix?
FireFox seems to be correct, according to the WHATWG specification.
The XMLHttpRequest specification of the FormData constructor says:
- If
formis given, setfd's entries to the result of constructing the form data set forform.
Then in the description of constructing the form data set, it says:
The algorithm to construct the form data set for a form form optionally in the context of a submitter submitter is as follows. If not specified otherwise, submitter is null.
A button in the form is only included in the form data set if it's the submitter. But when this algorithm is executed from the FormData constructor, no submitter is specified, so no buttons should be included in the form data set.
這篇關于FormData() 對象不會從表單添加提交類型的輸入，而在 Firefox 上的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！