通过 ajax 向外部 php 脚本提交一组值（数据表延迟渲染）答案

【问题标题】：Submitting an array of values through ajax to external php script (datatables deferred rendering)通过 ajax 向外部 php 脚本提交一组值（数据表延迟渲染）
【发布时间】：2015-04-18 05:33:25
【问题描述】：

我的一个页面上有一个表单，其中包含与某些信息的主 ID 相关联的复选框，这些信息会根据复选框是否被选中而在另一个页面上被调用。我最近切换到在此表上使用 jquery-datatables 并延迟渲染，所以现在看来我的表单（使用 php/html 创建）只能看到视口中的大约 150 个元素，即使所有复选框都有被选中。我的问题是：当我的“compareRowButton”被点击时，如何从整个表格中收集这些复选框 id 并通过 ajax 发送它们？

这是我的表单现在的样子：

<form action='comparables/compare_baddebt.php' method='post' name='compareForm'>
<button type='submit' style='margin-bottom:0px;margin-left:10px;' class='btn btn-default compareRowButton'>Compare Selected Rows</button>

//lets just pretend that the only thing here is the checkbox
<input type='checkbox' id='1' value='1' class='compareCheck' name='post_id[]'/> // checkbox storing id into post_id
<input type='checkbox' id='2' value='2' class='compareCheck' name='post_id[]'/>
</form>

我不是一个 jquery 向导，所以请原谅我，但这是我用来选择/取消选择所有复选框的脚本：

$('#selectall').on('click', function() {  //on click 
    var cells = dTable.cells( ).nodes();
    $( cells ).find(':checkbox').prop('checked',this.checked);         
    });

我发布此内容的原因是因为我假设可以调整其中一种方法以取回复选框的值，包括延迟渲染中的隐藏行（.cells().nodes() 是数据表的一部分api）。

我需要知道的是如何将这些 ID 存储在 jquery 中的数组中，然后使用 jquery/ajax 将它们发布到 compare_baddebt.php（表单的操作），而不是直接提交表单通过 html。

我知道如何通过 ajax 帖子发送单个变量，但收集一个数组并以正确的格式发送它以供召回让我望而却步。

目前我的 compare_baddebt.php 接受 post_id 数组，如下所示：

$in = $_POST['post_id'];

然后使用 foreach 循环遍历数组以调用各个行并将它们放入新表中进行比较。

foreach ($in as $id){
    $query = $link->prepare("SELECT id,provider_num, provider_name, 261_total_bad_debts, 271_medicare_bad_debts, 281_non_medicare_bad_debts, 1_cost_to_charge_ratio, 291_cost_of_non_mcr_bad_debts
                            FROM `s10`
                            WHERE `id` = :id");
    $query->bindParam(':id', $id, PDO::PARAM_INT);
    $query->execute();
    $results = $query->fetch(PDO::FETCH_ASSOC);

提前致谢，如果您需要更多信息，我很乐意提供

【问题讨论】：

答案已经标记在您的问题中，尝试通过$.ajax 创建一个 XMLHttpRequest，因为您已经在使用 jQuery
@Ghost 答案在我的问题中被标记是什么意思？我知道我必须使用 ajax，我的主要问题是将 php 数组保存到 javascript 变量中的格式是什么。 var ele_id = $(this).attr('id'); console.log(ele_id); console.log('clicked'); $.ajax({ type : 'post', url : 'query/modalquery_providerlist.php', // in here you should put your query data : 'post_id='+ ele_id 如何用数组代替

标签： javascript php jquery ajax jquery-datatables

【解决方案1】：

使用延迟渲染，并非所有表格行都会立即可用，因此您将无法查询或设置所有复选框的状态。

为了能够发送选中的项目列表，您需要为每个复选框添加click 事件处理程序，并将它们的状态作为键/值对存储在全局变量中。提交表单后，您需要将此对象转换为仅包含选中项的数组。

以下只是说明上述逻辑的示例，请根据需要进行修改。

JavaScript：

// Global variable holding current state of the check boxes
var g_compare_posts = {};

// Handle click on compare check box
$('table.dataTable').on('click', '.compareCheck', function (e){
    g_compare_posts[this.value] = this.checked;
});

// Handle click on 'Submit' button
$('.compareRowButton').on('click', function(e){
   // Produce a list of checked items
   var compare_posts_checked = [];
   for (var post_id in g_compare_posts) {
      if (g_compare_posts.hasOwnProperty(post_id) && g_compare_posts[post_id]) {
         compare_posts_checked.push(post_id);
      }
   }

   // Send AJAX request
   $.ajax(document.compareForm.action, {
      'data': {'post_id' : compare_posts_checked }
   });

   e.preventDefault();
});

如果您希望能够选择所有复选框，您需要将该复选框的状态发送到服务器端 PHP 脚本并相应地调整您的 SQL 查询，即不应用 WHERE 条件或应用相同的条件用于生成初始表的条件。

【讨论】：