Question

提交值是在Safari中发送的，而不是在Chrome中发送的

我无法为我的生命解决这一问题。我有一个非常简单的表单，该表单通过JavaScript中的XMLHttpRequest提交并调用一些.php。 Safari是我的主要浏览器，因此一切正常。我将提交将运行我的php脚本的表单，该脚本将日记记录插入MySQL数据库。

这很有趣，因为我请朋友check it out参加，他当然在Chrome中尝试了无效的操作。

我确定这很愚蠢。

我在Chrome开发工具中检查了网络，对我来说似乎还不错。控制台中没有警告或错误。

xhr.onload已执行，但xhr.responseText为空字符串。

Chrome Network Console

<!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">&times;</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>

Answer 1

仔细研究了Safari和Chrome之间的请求有效负载后，我发现两者之间存在差异...

对于Chrome：

------ WebKitFormBoundarywCefymCztLxJ2hO0

Content-Disposition：表单数据； name =“ userName”

Chrome

------ WebKitFormBoundarywCefymCztLxJ2hO0

Content-Disposition：表单数据； name =“ notes”

测试

-WebKitFormBoundarywCefymCztLxJ2hO0-

对于Safari：

------ WebKitFormBoundarysw6ByLvitbY94DeC

Content-Disposition：表单数据； name =“ userName”

Safari

------ WebKitFormBoundarysw6ByLvitbY94DeC

Content-Disposition：表单数据； name =“ notes”

测试

------ WebKitFormBoundarysw6ByLvitbY94DeC

Content-Disposition：表单数据； name =“提交”

提交

-WebKitFormBoundarysw6ByLvitbY94DeC-

我的PHP脚本正在验证是否传递了提交值。我想Chrome不会通过设置了类型/值属性的按钮。

<button type="submit"  value="Submit" name="submit" class="btn btn-primary">Submit</button>

感谢大家对我问题的建议，我很高兴这很愚蠢。

提交按钮表单数据值未在XMLHttpRequest中发送

1 个答案: