Bootstrap表单验证+PHP AJAX问题：序列化表单后$_POST返回空数组

问题原因 #

你在AJAX请求里设置了contentType: false和processData: false，这两个参数是专门用来发送FormData对象（比如带文件上传的表单）的配置。但你现在用$("#formcreatenewpost").serialize()生成的是application/x-www-form-urlencoded格式的字符串，这两个配置会打乱jQuery默认的请求头设置和数据处理逻辑，导致PHP无法正确解析POST数据，$_POST自然就成了空数组。

解决方案 #

根据你的实际需求，分两种情况处理：

情况1：当前表单无需上传文件（对应你现在的场景）

直接删掉AJAX配置里的contentType: false和processData: false就行，jQuery会自动处理请求头和数据格式，PHP就能正常读取$_POST数据了。

修正后的JS代码：

(function ($) {
    "use strict";

    function process_new_post(postData) {
        $.ajax({
            url:"createpost.php",
            method:"POST",
            data:  postData ,
            cache: false,
            success:function(response)
            {
                alert(response);
            },
            error:function(jqXHR, textStatus, errorThrown){
                console.error("AJAX Request Error:", textStatus, errorThrown);
            }
        });
    }

    $(document).ready(function () {
        var forms = document.querySelectorAll('.needs-validation');
        Array.prototype.slice.call(forms)
            .forEach(function (form) {
                form.addEventListener('submit', function (event) {
                    Array.from(form.elements).forEach((input) => {
                       if ( (input.value.trim()==='') && (input.type!=='button') && (input.type!=='submit') ) {
                         input.value = '';
                       }
                    });

                    if ( !form.checkValidity() ) {
                      event.preventDefault();
                      event.stopPropagation();
                    }
                    else {
                        event.preventDefault();
                        process_new_post( $("#formcreatenewpost").serialize() );
                    }
                    form.classList.add('was-validated')
              }, false);
        });
    });
})(jQuery);

情况2：后续需要支持文件上传

如果之后要给表单添加文件上传控件，就别用serialize()，直接创建FormData对象，这时保留contentType: false和processData: false才是正确的：

修改后的process_new_post函数：

function process_new_post(formElement) {
    let formData = new FormData(formElement);
    $.ajax({
        url:"createpost.php",
        method:"POST",
        data: formData,
        contentType: false,
        processData: false,
        cache: false,
        success:function(response)
        {
            alert(response);
        },
        error:function(jqXHR, textStatus, errorThrown){
            console.error("AJAX Request Error:", textStatus, errorThrown);
        }
    });
}

调用时直接传入表单元素：

process_new_post( $("#formcreatenewpost")[0] );

验证效果 #

修改完成后测试，PHP的print_r($_POST)会输出正确的数组：

Array
(
    [a_location] => abc
    [a_headline] => def
)

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