提交值在 Safari 而不是 Chrome 中发送
我这辈子都想不通。我有一个非常简单的表单，它通过 javascript 中的 XMLHttpRequest 提交和调用一些 .php。 Safari 是我的主要浏览器，所以一切正常。我将提交将运行我的 php 脚本的表单，该脚本将日志记录插入 MySQL 数据库。
这很有趣，因为我问了一个 friend check it out当然，他在 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>最佳答案
在仔细研究了 Safari 和 Chrome 之间的 Request Payload 之后，我注意到两者之间存在差异......
对于 Chrome:
------WebKitFormBoundarywCefymCztLxJ2hO0
Content-Disposition: form-data; name="userName"
Chrome
------WebKitFormBoundarywCefymCztLxJ2hO0
Content-Disposition: form-data; name="notes"
TEST
------WebKitFormBoundarywCefymCztLxJ2hO0--
对于 Safari:
------WebKitFormBoundarysw6ByLvitbY94DeC
Content-Disposition: form-data; name="userName"
Safari
------WebKitFormBoundarysw6ByLvitbY94DeC
Content-Disposition: form-data; name="notes"
TEST
------WebKitFormBoundarysw6ByLvitbY94DeC
Content-Disposition: form-data; name="submit"
Submit
------WebKitFormBoundarysw6ByLvitbY94DeC--
我的 PHP 脚本正在验证提交值是否被传递。我猜 Chrome 不会通过设置了类型/值属性的按钮。
<button type="submit" value="Submit" name="submit" class="btn btn-primary">Submit</button>感谢大家对我的问题提出的建议，我很高兴这是一个愚蠢的问题。
关于javascript - 提交按钮表单数据值未在 XMLHttpRequest 中发送，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51316102/