AJAX POST提交表单后PHP端$_POST为空数组的问题求助

我用serialize()方法生成URL编码字符串，尝试各种方案都没解决问题。相关代码如下：

HTML代码 #

<form id="idEditTaskForm">
    <div class="form-group">
        <input type="text" class="form-control"  name="taskName" id="idTaskName" placeholder="Enter Task name" value="">
    </div>
    <div>
        <input type="hidden"  name="id" id="idTask" value="" />
    </div>
    <button type="submit" class="btn btn-primary" id="idEditTask">
        Save
    </button>
</form>

JavaScript代码 #

$(document).on('click', "#idEditTask", function(){
    $("#idCloseButton").click();
        $('#idEditTaskForm').submit(function(e) { // handle the submit event
            e.preventDefault();
            var formData = $(this).serialize();
            $.post({
                url: "http://localhost:8000/index.php?sFlag=saveTaskDetails",
                type: 'POST',
                data: {'formData': formData},
                contentType: 'application/x-www-form-urlencoded',
                success:function(data){
                    console.log(data);
                    if(data == true){
                        console.log(data);
                    }
                }
            })
        })
});

PHP代码 #

<?php
    if(isset($_GET['sFlag'])){
        $sFlag = $_GET['sFlag'];
            if($sFlag == "saveTaskDetails"){
                print_r( $_POST);
                $id = $_POST['id'];
                $name = $_POST['taskName'];

                //$oCrudData = new CrudData();
                //$result = $oCrudData->saveTask($id, $name);
                //echo $result;
            }
    }
?>

打印$_POST时显示空数组，同时出现以下错误：

Array ( )
Notice: Undefined index: id in C:\Users\Phaneeswar D\Desktop\Suman_learning_projects\crud_app\index.php on line 9
Notice: Undefined index: taskName in C:\Users\Phaneeswar D\Desktop\Suman_learning_projects\crud_app\index.php on line 10

问题根源 #

1. 重复绑定提交事件：在按钮点击事件内嵌套绑定表单submit事件，导致第一次点击仅完成事件绑定，第二次点击才触发提交，且多次点击会重复绑定，逻辑混乱。
2. 数据传递格式错误：将serialize()生成的URL编码字符串包装成{'formData': formData}对象，PHP端仅能收到一个formData键，无法直接解析出id和taskName。

修正后的代码 #

优先方案：直接绑定表单submit事件

$(document).on('submit', '#idEditTaskForm', function(e) {
    e.preventDefault();
    $("#idCloseButton").click();
    var formData = $(this).serialize();
    $.post({
        url: "http://localhost:8000/index.php?sFlag=saveTaskDetails",
        data: formData, // 直接传递序列化后的字符串，无需包装
        contentType: 'application/x-www-form-urlencoded',
        success:function(data){
            console.log(data);
            if(data == true){
                console.log(data);
            }
        }
    });
});

备选方案：保留按钮点击逻辑（不推荐）

若需通过按钮点击触发，需阻止按钮默认提交行为，避免重复绑定：

$(document).on('click', "#idEditTask", function(e){
    e.preventDefault();
    $("#idCloseButton").click();
    var $form = $('#idEditTaskForm');
    var formData = $form.serialize();
    $.post({
        url: "http://localhost:8000/index.php?sFlag=saveTaskDetails",
        data: formData,
        contentType: 'application/x-www-form-urlencoded',
        success:function(data){
            console.log(data);
            if(data == true){
                console.log(data);
            }
        }
    });
});

PHP端优化（避免Undefined index提示） #

<?php
    if(isset($_GET['sFlag'])){
        $sFlag = $_GET['sFlag'];
        if($sFlag == "saveTaskDetails"){
            print_r($_POST);
            // 增加isset判断，避免空值报错
            $id = isset($_POST['id']) ? $_POST['id'] : '';
            $name = isset($_POST['taskName']) ? $_POST['taskName'] : '';

            //$oCrudData = new CrudData();
            //$result = $oCrudData->saveTask($id, $name);
            //echo $result;
        }
    }
?>

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