使用AJAX时除this.serialize序列化数据外如何向PHP页面传递额外变量

实现方法 #

你可以通过以下两种方式在序列化表单数据之外额外传递total变量：

方法1：直接拼接序列化字符串（最简单） #

jQuery的serialize()方法返回的是URL编码的查询字符串，你直接在末尾拼接自定义参数即可：

$('#update_form').on('submit', function(e){
    e.preventDefault();
    var total = parseFloat($('#total').text()); // 你需要额外传递的变量
    if($('.check_box:checked').length > 0)
    {
        $.ajax({
            url:"pages/Model/multiple_update.php",
            method:"POST",
            // 拼接额外参数，注意参数名前面加&符号
            data: $(this).serialize() + '&total=' + encodeURIComponent(total),
            success:function()
            {
                alert('Data Updated');
                $('#multiple_update').attr('disabled', 'disabled');
                fetch_data();
            }
        });
    }
});

注意这里用encodeURIComponent()处理变量值，避免值包含特殊字符导致传参错误，后台PHP可以直接通过$_POST['total']获取该参数。

方法2：使用FormData对象（适合复杂传参场景） #

如果后续需要传递文件等更复杂的参数，推荐用FormData处理：

$('#update_form').on('submit', function(e){
    e.preventDefault();
    var total = parseFloat($('#total').text());
    if($('.check_box:checked').length > 0)
    {
        // 初始化FormData，直接传入表单DOM对象即可自动序列化表单数据
        let formData = new FormData(this);
        // 追加自定义参数
        formData.append('total', total);
        $.ajax({
            url:"pages/Model/multiple_update.php",
            method:"POST",
            data: formData,
            // 这两个参数必须加，否则jQuery会自动处理FormData导致传参失败
            processData: false,
            contentType: false,
            success:function()
            {
                alert('Data Updated');
                $('#multiple_update').attr('disabled', 'disabled');
                fetch_data();
            }
        });
    }
});

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