Question

我想在我的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和contest_type序列化为单个变量，以便将我的AJAX处理函数作为单个数据字符串传递？

Answer 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},
    });
};

Answer 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中的数据等等......

Answer 3

jQuery的ajax接受对象作为数据;它会照顾你的序列化。所以你可以简单地做

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

Answer 4

如果您想这样做，请尝试在HTML代码中使用表单元素和输入（如果它不是用户提交的表单，则可以是隐藏字段），并对其进行序列化，以便您可以传输整个“块”信息'与Ajax同时出现。

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

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

4 个答案: