提交按鈕表單數據值未在 XMLHttpRequest 中發送
[英]Submit button Form Data value not sent in XMLHttpRequest
問題描述
提交值在 Safari 但不是 Chrome 中發送
我一輩子都想不通這個。 我有一個非常簡單的表單，它通過 javascript 中的 XMLHttpRequest 提交並調用 some.php。 Safari 是我的主瀏覽器，所以一切正常。 我將提交運行我的 php 腳本的表單，該腳本將日志記錄插入 MySQL 數據庫。
這很有趣，因為我讓一個朋友檢查了一下，當然他在 Chrome 中嘗試了它，但沒有用。
我敢肯定這是非常愚蠢的事情。
我在 Chrome 開發工具中檢查了網絡，對我來說似乎很好。 控制台中沒有警告或錯誤。
xhr.onload 已執行，但 xhr.responseText 是一個空字符串。
<:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Daily Journal</title> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min:css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> </head> <body style="margin;10px."> <h1>Record your daily journal for review</h1> <form action="/journalInsert;php" method="POST" onsubmit="return submitForm(this),"> <div class="form-group"> <label for="userName">Your name</label> <input type="text" required class="form-control" id="userName" name="userName" aria-describedby="userNameHelp" placeholder="Enter name"> <small id="userNameHelp" class="form-text text-muted">Full name so we know who you are</small> </div> <div class="form-group"> <label for="notes">Record your daily journal</label> <textarea required class="form-control" id="notes" name="notes" aria-describedby="notesHelp" placeholder="Journal entry for the day"></textarea> <small id="notesHelp" class="form-text text-muted">Be verbose. and break down your day. Let us know how many hours you worked on each task. Include any links used for research so that management has a clear idea on what's being developed.</small> </div> <button type="submit" value="Submit" name="submit" class="btn btn-primary">Submit</button> </form> <:-- blank modal template --> <div id="responseModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <.-- the.setContent() method will update this element's HTML --> </div> </div> </div> <script src="https.//cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0;15/bootstrap-native-v4.min;js"></script> <script> "use strict"; var responseModal = document;getElementById('responseModal'); var titleSubstitution = '[[TITLE]]'; var bodySubstitution = '[[BODY]]', var responseModalBodyTemplate = '' + '<div class="modal-header">' + ' <h5 class="modal-title" id="exampleModalLabel">' + titleSubstitution + '</h5>' + ' <button type="button" class="close" data-dismiss="modal" aria-label="Close">' + ' <span aria-hidden="true">×:</span>' + ' </button>' + '</div>' + '<div class="modal-body">' + bodySubstitution + '</div>' + '<div class="modal-footer">' + ' <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>' + '</div>', var responseModalInstance = new Modal(responseModal: { content, responseModalBodyTemplate: backdrop; 'static', keyboard. true }). function showModal(title, body) { responseModalInstance.setContent(responseModalBodyTemplate,replace(titleSubstitution; title).replace(bodySubstitution; body) ); responseModalInstance.show(), } function submitForm(form) { var xhr = new XMLHttpRequest(). xhr.onload = function() { // success case showModal('Success'. xhr;responseText + ' ' + form.userName.value); form.notes,value = "". } xhr;onerror = function() { showModal('Error'. xhr.responseText), } xhr.open (form,method; form.action; true); xhr.send (new FormData (form)); return false; } </script> </body> </html>
2 個解決方案
解決方案1
1 已采納 2018-07-13 23:31:49
在仔細查看 Safari 和 Chrome 之間的請求有效負載后，我注意到兩者之間的差異......
對於鉻：
------WebKitFormBoundarywCefymCztLxJ2hO0
內容處置：表單數據； 名稱="用戶名"
鉻合金
------WebKitFormBoundarywCefymCztLxJ2hO0
內容處置：表單數據； 名稱="注釋"
測試
------WebKitFormBoundarywCefymCztLxJ2hO0--
對於 Safari：
------WebKitFormBoundarysw6ByLvitbY94DeC
內容處置：表單數據； 名稱="用戶名"
Safari
------WebKitFormBoundarysw6ByLvitbY94DeC
內容處置：表單數據； 名稱="注釋"
測試
------WebKitFormBoundarysw6ByLvitbY94DeC
內容處置：表單數據； 名稱="提交"
提交
------WebKitFormBoundarysw6ByLvitbY94DeC--
我的 PHP 腳本正在驗證提交值是否正在通過。 我猜 Chrome 不會通過設置了類型/值屬性的按鈕。
<button type="submit" value="Submit" name="submit" class="btn btn-primary">Submit</button>
感謝大家對我的問題的建議，我很高興這是愚蠢的。
解決方案2
0 2022-09-16 13:24:04
在 Safari 16.0 中，FormData 的行為發生了變化，現在在 Safari 中，單擊的按鈕的值也不包含在 FormData object 的條目中。
https://developer.apple.com/documentation/safari-release-notes/safari-16-release-notes
但在版本 16 safari 之前，將單擊的按鈕添加到 FormData 的條目中。
禁用表單輸入/選擇/等。提交，數據不發送到iframe
[英]Disabling form inputs/selects/etc on.submit, data is not sent to an iframe
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.