如何在 php 文件中接收 jquery ajax 数据答案

【问题标题】：How to receive jquery ajax data in a php file如何在 php 文件中接收 jquery ajax 数据
【发布时间】：2017-09-25 08:41:13
【问题描述】：

我正在尝试创建用于提交简历的表单。

我需要候选人姓名、电子邮件、简历封面和简历（文件）。

var candidateName = $('#candidateName').val();
var candidateEmail = $('#candidateEmail').val();
var candidateMessage = $('#candidateMessage').val();
var file_data = $('#candidateResume').prop('files')[0];


var form_data = new FormData();
form_data.append('file', file_data);
form_data.append('name', candidateName);
form_data.append('id', candidateEmail);
form_data.append('msg', candidateMessage);
console.log(form_data);

$.ajax({
    url: "cvForm.php",
    type: "POST",
    data: {candata: form_data},
    success : function(data){
        console.log(data);
    },
    contentType: false,
    processData: false
});

我的 cvForm.php 文件中没有返回任何内容

var_dump($_POST) or
var_dump($_FILES)

当我

var_dump($_POST['candata']) - it says undefined index

HTML

<form id="cvSubmit" class="mui-form">
                <div>
                    <span class="form-success-msg" id="cv-form-success-msg">
                        Thanks for reaching out to us. We will get back to you shortly.
                    </span>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="mui-textfield mui-textfield--float-label">
                            <input type="text" id="candidateName" class="mui--is-empty mui--is-untouched mui--is-pristine">
                            <label>Name<span class="red-text">*</span></label>
                            <span class="error" id="cv-name-error">Please enter your name</span>
                        </div>
                        <div class="mui-textfield mui-textfield--float-label">
                            <input type="email" id="candidateEmail" class="mui--is-empty mui--is-untouched mui--is-pristine">
                            <label>Email<span class="red-text">*</span></label>
                            <span class="error" id="cv-email-error">Oops!! Looks like its an incorrect email id. Try again</span>
                        </div>


                        <div class="row">
                            <div class="col-xs-12 file-attachment-wrapper">
                                <input class="file-addach" type="file" id="candidateResume">
                                <span>We accept .DOCX,.Doc,pdf,.Txt upto 2 MB.</span>
                            </div>
                        </div>

                    </div>

                    <div class="col-sm-6">

                        <div class="mui-textfield mui-textfield--float-label">
                            <label>Message<span class="red-text">*</span></label><br><br>

                            <textarea id="candidateMessage" rows="5" class="mui--is-empty mui--is-untouched mui--is-pristine"></textarea>
                            <span class="error" id="cv-message-error">That's not very clear...could you rephrase</span>
                        </div>

                        <button type="button" class="mui-btn mui-btn--raised red-btn" onclick="cvSubmit()"> SEND </button>
                    </div>

                </div>
            </form>

请帮忙。我认为这是一个常见问题，但似乎没有一个解决方案对我有用。一些代码刷新了页面，我不希望发生这种情况。

【问题讨论】：

您应该（可能）为此发布 HTML。
在开发时始终在浏览器中使用F12dev-console，主要是控制台和网络选项卡。
Problems with passing data to php using jquery ajax的可能重复
Have you watched the AJAX request / response in the browser's developer tools? Have you included the jQuery library in the project? Are there any errors reported? Are you running this on a web-server?
你在关注这里的cmets吗？我/我们不应该为了引起您的注意而发布答案。我本人专门为您发布了一条评论，让您为此发布 HTML，那几乎是 10 分钟。前。根据您发布的错误消息和您在答案评论区之一中显示的错误消息，您的问题将通过PHP: “Notice: Undefined variable”, “Notice: Undefined index”, and “Notice: Undefined offset” 结束。我们/我正在尽最大努力提供帮助，但您似乎坚持一个答案。

标签： php jquery ajax forms

【解决方案1】：

试试这个。它可能会对你有所帮助。

<html>
    <head>
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
    </head>
    <body>
        <form id="cvSubmit" class="mui-form">
            <div>
                <span class="form-success-msg" id="cv-form-success-msg">
                    Thanks for reaching out to us. We will get back to you shortly.
                </span>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="mui-textfield mui-textfield--float-label">
                        <input type="text" id="candidateName" class="mui--is-empty mui--is-untouched mui--is-pristine">
                        <label>Name<span class="red-text">*</span></label>
                        <span class="error" id="cv-name-error">Please enter your name</span>
                    </div>
                    <div class="mui-textfield mui-textfield--float-label">
                        <input type="email" id="candidateEmail" class="mui--is-empty mui--is-untouched mui--is-pristine">
                        <label>Email<span class="red-text">*</span></label>
                        <span class="error" id="cv-email-error">Oops!! Looks like its an incorrect email id. Try again</span>
                    </div>


                    <div class="row">
                        <div class="col-xs-12 file-attachment-wrapper">
                            <input class="file-addach" type="file" id="candidateResume">
                            <span>We accept .DOCX,.Doc,pdf,.Txt upto 2 MB.</span>
                        </div>
                    </div>

                </div>

                <div class="col-sm-6">

                    <div class="mui-textfield mui-textfield--float-label">
                        <label>Message<span class="red-text">*</span></label><br><br>

                        <textarea id="candidateMessage" rows="5" class="mui--is-empty mui--is-untouched mui--is-pristine"></textarea>
                        <span class="error" id="cv-message-error">That's not very clear...could you rephrase</span>
                    </div>

                    <button type="submit" class="mui-btn mui-btn--raised red-btn"> SEND </button>
                </div>

            </div>
        </form>

        <script>

            $(document).ready(function(){
                $("#cvSubmit").submit(function(e) {
                            e.preventDefault();


                    var candidateName = $('#candidateName').val();
                    var candidateEmail = $('#candidateEmail').val();
                    var candidateMessage = $('#candidateMessage').val();
                    var file_data = $('#candidateResume').prop('files')[0];


                    var form_data = new FormData();
                    form_data.append('file', file_data);
                    form_data.append('name', candidateName);
                    form_data.append('id', candidateEmail);
                    form_data.append('msg', candidateMessage);
                    console.log(form_data);

                    $.ajax({
                        url: "cvForm.php",
                        type: "POST",
                        data: form_data,
                        success : function(data){
                            console.log(data);
                        },
                       contentType: false,
                       processData: false
                    });

                });
            });
        </script>
    </body>
</html>

在这段代码之后，我能够在控制台中看到数据
将提交按钮更改为“提交”类型并处理表单提交的事件处理程序，并且 e.preventDefault() 防止页面刷新。

希望对你有帮助！

【讨论】：

【解决方案2】：

您需要以正常形式传递form_data，而不是另一个 JSON 对象的属性：

$.ajax({
    url: 'cvForm.php',
    type: 'post',
    data: form_data,
    processData: false,
    success : function(data){
        console.log(data);
    }
});

现在在您的 PHP 脚本中，您将可以访问 $_POST['name']、$_POST['id'] 和 $_POST['msg']。同样，$_FILES['file'] 现在也可用。

【讨论】：

我做了 var_dump($_POST['name']) - 它给了我未定义的索引：名称
您是否完全按照上面发布的方式复制了摘录？
如果你 print_r() $_POST 数组会发生什么？
我可以看到数组中的数据..在下面分享结果
Array ( [------WebKitFormBoundaryX29YrY3X1X9U8Efd Content-Disposition:_form-data;_name] => "file" undefined ------WebKitFormBoundaryX29YrY3X1X9U8Efd Content-Disposition: form-data; 名称="name" John Doe ------WebKitFormBoundaryX29YrY3X1X9U8Efd Content-Disposition: form-data; name="id" john.doe@gmail.com ------WebKitFormBoundaryX29YrY3X1X9U8Efd Content-Disposition: form-data; name= "msg" 与我们分享您的简历，我们将很高兴看到它。 ------WebKitFormBoundaryX29YrY3X1X9U8Efd--)

【解决方案3】：

从你的 JS 中删除这一行：

contentType: false,

这告诉 jQuery 不要设置内容类型 HTTP 标头。该标头告诉 PHP 如何解析 POST 的正文。

另外，formdata也可以直接发送：

data: form_data,

然后，在 PHP 中，您应该会找到例如 $_POST['name'] 可用。

【讨论】：