使用 JS 变量并序列化 AJAX 请求答案

【问题标题】：Use JS variables and serialize for AJAX request使用 JS 变量并序列化 AJAX 请求
【发布时间】：2016-07-19 08:54:08
【问题描述】：

我想在我的 AJAX 请求中包含以下代码：

function ajax_post( form_info ){
    var request = $.ajax({
    url: "ajax_handler.php",
    type: "POST",
       data: {data : form_info},
    });
};

我想序列化单击事件中的所有元素以直接传递给 AJAX 函数，因为我正在 PHP 端进行处理。假设我有以下点击功能：

$('.open-popup').on("click", function() {
    var clicked_id = $(this).attr('id');
    var contest_id = $('#contest-id').val();
    var contest_type = $('#contest_type').val();
    //serialize everything to a data_to_pass variable
    ajax_post( data_to_pass );
});

如何将 clicked_id、contest_id 和 match_type 序列化为单个变量，以作为单个数据字符串传递给我的 AJAX 处理函数？

【问题讨论】：

你能发布你的 HTML 标记吗？
How to serialize form stored in a variable jQuery的可能重复
@DiniZx 这些元素不在表单中，所以我不想序列化表单。

标签： php jquery ajax

【解决方案1】：

你可以这样做：

var data_to_pass = {
   clicked_id: clicked_id,
   contest_id: contest_id,
   contest_type: contest_type
}

JS：

$('.open-popup').on("click", function() {
    var clicked_id = $(this).attr('id');
    var contest_id = $('#contest-id').val();
    var contest_type = $('#contest_type').val();
    var data_to_pass = {
       clicked_id: clicked_id,
       contest_id: contest_id,
       contest_type: contest_type
    };
    ajax_post( data_to_pass );
});

AJAX：

function ajax_post( form_info ){
    var data = JSON.stringify(form_info);
    var request = $.ajax({
    url: "ajax_handler.php",
    type: "POST",
       data: {data : data},
    });
};

【讨论】：

【解决方案2】：

您可以为此创建FormData 并使用.append() 函数附加所有必需的值。

这样，

$('.open-popup').on("click", function() {
    var clicked_id = $(this).attr('id');
    var contest_id = $('#contest-id').val();
    var contest_type = $('#contest_type').val();
    //serialize everything to a data_to_pass variable

    var fd = new FormData();
    fd.append( 'clicked_id', clicked_id);
    fd.append( 'contest_id', contest_id);
    fd.append( 'contest_type', contest_type);

    ajax_post(fd);
});

AJAX 函数看起来像这样，

function ajax_post( form_data ){
    var request = $.ajax({
        url: "ajax_handler.php",
        type: "POST",
        data: form_data,
    });
};

并使用$_POST['clicked_id']等访问PHP中的数据...

【讨论】：

【解决方案3】：

jQuery 的ajax 接受对象作为数据；它会为您处理序列化。所以你可以简单地做

ajax_post({
    clicked_id:$(this).attr('id'),
    contest_id:$('#contest-id').val(),
    contest_type: $('#contest_type').val()
});

【讨论】：

【解决方案4】：

如果您想这样做，请尝试在您的 HTML 代码中使用表单元素和输入（如果不是用户提交的表单，它可以是隐藏字段），并将其序列化，以便您可以传输整个“块”一次使用 Ajax。

在this问题上查看rfunduk的答案。

【讨论】：