使用AJAX提交表单时PHP如何检测submit按钮的name属性值

问题原因 #

你通过JS拦截表单提交并使用FormData构造函数提交表单时，不会自动包含提交按钮的name/value参数，只有浏览器原生表单提交行为才会自动把被点击的提交按钮参数加入请求体，所以后端isset($_POST['aa'])永远返回false。

解决方案 #

以下两种方案任选一种即可，后端if(isset($_POST['aa']))的判断逻辑不需要修改：

方案1：手动向FormData中追加按钮参数

修改你的AJAX代码，在构建FormData之后主动添加aa参数：

$(document).ready(function (e) {
    $("#uploadForm").on('submit',(function(e) {
        e.preventDefault();
        var formData = new FormData(this);
        // 手动添加提交按钮参数
        formData.append('aa', '保存');
        $.ajax({
            url: "upload.php",
            type: "POST",
            data: formData,
            contentType: false,
            cache: false,
            processData:false,
            success: function(data)
            {
                $("#targetLayer").html(data);
            },
            error: function() 
            {
            }             
           });
    }));
});

方案2：表单新增隐藏域传递参数

如果不想修改JS代码，直接在表单内添加隐藏input元素即可，FormData会自动收集该参数：

<form id="uploadForm" action="upload.php" method="post">
    <!-- 新增这一行隐藏域 -->
    <input type="hidden" name="aa" value="保存">
    <!-- 原有表单其余代码保持不变 -->
    <div class="row">
        <div class="col-md-12 mb-1">
            <div id="targetLayer">无图片</div>
        </div>
        <div class="col-md-12">
            <div class="form-group">
                <input name="text" type="text" class="inputFile form-control" />
            </div>
        </div>
        <div class="col-md-12">
            <div class="form-group">
                <input name="userImage" type="file" class="inputFile form-control" />
            </div>
        </div>
        <div class="col-md-12">
            <div class="form-group text-center">
                <input type="submit" value="保存" name="aa" class="btnSubmit btn btn-success" />
            </div>
        </div>
    </div>
</form>

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