javascript - 如何通过 JQuery ajax 调用将数据表的选定行的数据发布到 php Controller

Question

我使用了来自 https://datatables.net/examples/api/select_row.html 的代码选择多行

$('#table tbody').on('click','tr', function(){
    $(this).toggleClass('selected');
});

这是jquery数据表的初始化

$(document).ready(function() {

    //datatables
    table = $('#table').DataTable({ 

        "processing": true, //Feature control the processing indicator.
        "serverSide": true, //Feature control DataTables' server-side processing mode.
        "order": [], //Initial no order.

        dom: 'Bfrtip',
        buttons: [
            //'copyHTML5', 'csvHTML5', 'excelHTML5', 'pdfHTML5', 'printHTML5'
            'copy', 'csv', 'print'//, 'excel', 'pdf'
        ],
        // Load data for the table's content from an Ajax source
        "ajax": {
            "url": "<?php echo site_url('person/ajax_list')?>",
            "type": "POST"
        },

        //Set column definition initialisation properties.
        "columnDefs": [
            { 
                "targets": [ -1 ], //last column
                "orderable": false, //set not orderable
            },
            { 
                "targets": [ -2 ], //2 last column (photo)
                "orderable": false, //set not orderable
            },
        ],

    });

    $('#table tbody').on('click','tr', function(){
        $(this).toggleClass('selected');
    });
}

现在我想通过 ajax 调用将这些选定的行发送到 php Controller ，这样我就可以用这些选定的行数据创建一个 csv 文件。

我创建了一个按钮，点击它会调用以下函数，其中进行了 ajax 调用

    function create_PO()
    {
        $('#btnSel').text('creating...');
        $('#btnSel').attr('disabled',true);

        var url = "<?php echo site_url('person/create_csv')?>";
        var selectedData = table.rows('.selected').data();
        //console.log(selectedData);
        //alert(selectedData.length);
        newData = new Array();
        for(i=0;i<selectedData.length;i++){
            newData.push(selectedData[i]);
        }
        jsonData = JSON.stringify({data : (selectedData[0].slice(0,5))});
        //console.log(jsonData);
        //newData = $.serialize(newData);
        //console.log(newData);

        $.ajax({
            url : url,
            type: "POST",
            data: jsonData,
            contentType: false,
            processData: false,
            dataType: "JSON",
            success: function(data)
            {
                /*data.forEach(function(e){
                    console.log(e);
                })*/
                console.log(data);
                // alert("sheet created successfully");

                // $('#btnSel').text('create');
                // $('#btnSel').attr('disabled',false);

            },
            /*error: function (jqXHR, textStatus, errorThrown)
            {
                alert('Error creating file');
            }*/

        });

    }}

当我从 Controller 执行 echo($_POST) 时，响应显示为空数组。此外，ajax 成功选项中的 console.log(data) 函数也没有打印任何内容。谁能告诉我问题出在哪里？谢谢!

Answer 1

JQuery部分

您在控制台中没有得到任何东西的原因是 success 回调获取服务器返回的数据，而不是发送的数据。尝试 console.log(jsonData)。

此外，要分析发送的数据，请使用 Chrome 开发者工具上的“网络”选项卡。

---

PHP

在 PHP 端，您可能在请求负载中传递数据，那是因为您的表单是 JSON 类型，而不是 Content-Type: application/x-www-form-urlencoded

要访问它，请使用以下而不是 $_POST:

$data = file_get_contents('php://input');

处理JSON

将字符串化的 json 处理成数组:

$processedData = json_decode($data);

现在您可以像这样访问您的数组属性:

foreach($processedData as $item){
        // do stuff
        echo $item;
}