使用type='button'按钮通过jQuery Ajax+FormData提交表单时$_POST为空求助

嘿，我一眼就瞅到问题所在啦！你的代码里创建FormData的时候犯了个小错误，导致表单数据根本没被正确收集，所以PHP那边才会拿到空的$_POST数组。

问题根源 #

在按钮的点击事件里，this指向的是点击的按钮元素（#discussion_submit_button），而不是整个表单。你用new FormData(this)创建的FormData对象自然是空的，因为按钮里没有表单字段。

修复方案 #

只需要把FormData的参数换成表单的DOM元素就行，有两种简单的写法：

写法1：直接传入表单的原生DOM对象

把var formData = new FormData(this);改成：

var formData = new FormData(document.getElementById('discussion_form'));

写法2：用jQuery获取表单后转成原生DOM

如果你习惯用jQuery，也可以这么写：

var formData = new FormData($('#discussion_form')[0]);

完整修正后的代码 #

JavaScript部分

$("#discussion_submit_button").on("click", function(e){
    e.preventDefault();
    var title = $("#discussion_title").val();
    var discussion = $("#discussion_input_textarea").val();
    if (title == '' || discussion == '') {
        $(".discussion_label_arrow, .discussion_required_fields").fadeIn("slow");
        setTimeout(function(){
            $('.discussion_label_arrow, .discussion_required_fields').fadeOut("slow");
        }, 2000);
    } else {
        // 这里改成传入表单元素
        var formData = new FormData(document.getElementById('discussion_form'));
        $.ajax({
            url: "widgets/discussion_board_submit.php",
            method: "POST",
            cache: false,
            processData: false,
            contentType: false,
            data: formData,
            success:function(data){
                console.log(data); // 用console.log更方便调试
            }
        });
    }
});

HTML部分（修正了标签未闭合的问题）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="" class="discussion_form" id="discussion_form">
    <div class="discussion_label_div">
        <span class="discussion_label_span">Title</span>
        <span class="discussion_label_arrow"></span>
    </div>
    <div class="discussion_input_div">
        <input type="text" name="discussion_title" class="discussion_input" size="50" id="discussion_title"/>
    </div>
    <div class="discussion_label_div">
        <span class="discussion_label_span">Subject</span>
        <span class="discussion_label_arrow"></span>
    </div>
    <div class="discussion_label_div">
        <span class="discussion_label_span">Discussion</span>
        <span class="discussion_label_arrow"></span>
    </div>
    <textarea rows="5" cols="50" name="discussion_textarea" class="discussion_input_textarea" placeholder="Open your discussion..." id="discussion_input_textarea"></textarea>
    <input type="button" name="discussion_submit_button" value="Assert" class="share_button" id="discussion_submit_button"/>
</form>

PHP部分（不变）

var_dump($_POST); 

测试效果 #

现在点击按钮提交后，PHP里的var_dump($_POST)应该会输出包含discussion_title和discussion_textarea的数组，比如：

array(2) {
  ["discussion_title"]=>
  string(...) "你输入的标题"
  ["discussion_textarea"]=>
  string(...) "你输入的讨论内容"
}

内容的提问来源于stack exchange，提问作者firashelou