Question

我正在使用AJAX提交表单，我可以使用chrome中的开发人员工具查看以下有效负载：

------WebKitFormBoundaryiwCAdpY9aJH3D9h9
Content-Disposition: form-data; name="datafixId"

666
------WebKitFormBoundaryiwCAdpY9aJH3D9h9
Content-Disposition: form-data; name="Ref"


------WebKitFormBoundaryiwCAdpY9aJH3D9h9
Content-Disposition: form-data; name="environment"

Live
------WebKitFormBoundaryiwCAdpY9aJH3D9h9
Content-Disposition: form-data; name="filesToUpload"; filename=""
Content-Type: application/octet-stream


------WebKitFormBoundaryiwCAdpY9aJH3D9h9
Content-Disposition: form-data; name="comments"


------WebKitFormBoundaryiwCAdpY9aJH3D9h9--

然而在收到的php页面中，$ _POST数据是空白的。如果我在我从页面收到的电子邮件中执行print_r（$ _ POST），它只包含＆＃39; 1＆＃39;。

如何在已发布的页面中获取此有效负载数据？

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <!--<link rel="stylesheet" href="css/bootstrap.min.css">-->

    <link rel="stylesheet" type="text/css" href="./custom.css">
    <title>Datafix Submission Tool</title>
</head>


<body>

    <div class="container">

    <form method="post" role="form" id="datafixForm" name="datafixForm"  enctype="multipart/form-data" data-toggle="validator">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="h1 highRow">Datafix Submission Tool</div>
            </div>
        </div>


        <div class="row">
            <div class="col-md-3">Datafix Ref : <div class="text-danger">*required</div></div>
            <div class="col-md-3 form-group has-feedback has-error">
                <input class="form-control" name="datafixId" id="datafixId" placeholder="CXXX" required pattern="^C[0-9][0-9][0-9]" data-error="Please choose a valid ID" />
                <div class="help-block with-errors"></div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-3">Reference : </div>
            <div class="col-md-3 form-group">
                <input type="text" class="form-control" id="Ref" name="Ref" placeholder="rmXXXXX">
            </div>
        </div>

        <div class="row">
            <div class="col-md-3">Please Select Environment : <div class="text-danger">*required</div></div>
            <div class="col-md-2 form-group has-feedback has-error">
                <select class="form-control" id="environment" name="environment"  data-error="An environment must be selected" required>
                    <option value="" disabled="disabled"></option>
                </select>
                <div class="help-block with-errors"></div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-3">Attach required files : </div>
            <div class="col-md-3 form-group">
                <input class="form-control" name="filesToUpload" id="filesToUpload" type="file" />
            </div>
        </div>

        <div class="row">
            <div class="col-md-3">Select preset comments:</div>
            <div class="col-md-6 checkbox form-group" id="presetComments" >
            </div>
        </div>

        <div class="row">
            <div class="col-md-3 ">Additional comments :</div>
            <div class="col-md-3 form-group">
                <textarea class="form-control" rows="3" name="comments" id="comments" placeholder="Comments" ></textarea>
            </div>
        </div>

        <div class="row">
            <div class="col-md-7 form-group">
                <button type="submit" id="submit" name="submit" class="btn btn-primary-outline center-block" >Submit</button>
            </div>
        </div>

    </form>

    <div class="row">
        <div class="col-md-10" id="results"></div>
    </div>

    </div>

    <!-- jQuery first, then Bootstrap JS. -->
    <script src="/jquery/jquery-1.11.3.min.js"></script>
    <script src="/jquery/bootstrap.min.js"></script>
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.min.css"></script>-->

    <script src="./jquery/validator.min.js"></script>


    <script>

        $( document ).ready(function() {




            $.ajax({
                url: 'ajax/environments.php',
                type: 'GET',
                dataType: 'json',
                success: function (loadEnvs) {

                    $.each(loadEnvs, function (i, value) {
                        console.log(i + ' < - > ' + value);
                        $('#environment').append($('<option>').text(value).attr('value', value));
                    });
                }
            });

            $.ajax({
                url: 'ajax/comments.php',
                type: 'GET',
                dataType: 'json',
                success: function (loadComments) {

                    $.each(loadComments, function (i, value) {
                        console.log(i + ' < - > ' + value);
                        $("#presetComments").append("<label><input id='" + i + "' type='checkbox' name='" + value + "' /> " + value + "</label><br>");
                    });
                    console.log(loadComments)
                }
            });

            $('#submit').on('click', function (e) {
                $('#datafixForm').validator();
                e.preventDefault();


                var myForm = document.querySelector('#datafixForm');
                var formData = new FormData(myForm);

                var formIsValid = $('.form-group.has-error').length===0;    // true as long as nothing contains has-error


                if (formIsValid) {
                    // Submit the form
                    $.ajax({
                        url: 'process.php',
                        method: 'POST',
                        data: formData,
                        contentType: 'multipart/formdata',
                        processData: false,
                        success: function (data) {
                            console.log('Form submitted!');
                            console.log('Recieved' + data);
                            alert('Form submitted!');
                        },
                        error: function (data) {
                            console.log('We failed');
                            console.log('Got' + data);
                            alert('Something went wrong submitting the form');
                        }
                    });
                } else {
                    alert("Form is invalid");
                }
            });
        });

Answer 1

一位评论者指出它应该是“multipart / form-data＆＃39;但这没有帮助

但是我注意到有人将其设置为假的另一个问题。

contentType: 'multipart/formdata',

成了

contentType: false,

令人惊讶的是它有效。

$ _POST不会填充有效负载中显示的数据

1 个答案: