使用 Ajax 渲染 html 表格答案

【问题标题】：Use Ajax to render a html table使用 Ajax 渲染 html 表格
【发布时间】：2015-08-28 14:54:54
【问题描述】：

我想知道如何实现以下项目

实际上我有一个呈现表格的 php 代码

<table id = "oldata" class ="table table-bordered">

    <thead>
            <tr class ="success">
                    <th class="text-center">Stage</th>
                    <th class="text-center">REQUEST</th>
                    <th class="text-center">REPLY</th>
            </tr>
        </thead>

    <tbody>
<?php

    foreach($allinfool as $infool){
        print("<tr>");
        print("<td>{$infool["Stage"]}</td>");
        print("<td class='text-left'>" .nl2br($infool["comment"])."</td>");
        print("<td class='text-left'>" .nl2br($infool["resultcom"]). "</td>");
        print("</tr>");
    }

?>
    </tbody>

</table>

到目前为止一切顺利，但是我想根据用户的操作构建许多类似上面的表。我的意思是他将有一个项目列表（如选项 1、选项 2、选项 3...），然后单击此选项将呈现而不重新加载 html 上方的页面（基于新的 allinfool 数组）。

我的意思是我想通过 Ajax 来实现。到目前为止，我可以管理 Ajax，但不能呈现 html 的上述内容。我可以设法返回一个数字或一个文本，但在这种情况下它更复杂，因为 html 与 php 混合在一起。您能帮我弄清楚如何实现这种 Ajax 技术吗？

【问题讨论】：

标签： php jquery html ajax

【解决方案1】：

将您的代码放入 table.php 之类的文件中，然后从 index.php 使用 Jquery 调用它并呈现表格：

HTML：

<button id="rendertable">Render new table</button>
<div id="render"></div>

JS：

$(document).ready(function () {

    $('#rendertable').click(function () {
        $.ajax({
            url: "table.php",
            success: function (response) {
                $('#render').append(response);
            }
        });
    });

});

每次单击按钮时，它都会呈现一个附加到 render 元素的新表格

【讨论】：

感谢您的回复，我是否应该在table.php 中做一些特别的事情来吐出hmtl？请给我看看好吗？
不，您不需要任何东西（按原样呈现表格），如果您从浏览器调用 table.php，您将看到您将呈现的内容：表格。
我试过了，这正是我所期望的。谢谢——

【解决方案2】：

you need to do this code in you main file from where you want to call table.php file - 
and pass the array variable into your $allinfool variable in table.php like-
$allinfool = array();
$allinfool = $_POST['variable_value'];
You have done.

//this code is for your index.php file or any other file from where you want to call table.php
 <?php 
    $arr = array(
        array("Stage" => "Stage_value1", "comment" => "comment_value1", "resultcom" => "resultcom_value1"),
        array("Stage" => "Stage_value2", "comment" => "comment_value2", "resultcom" => "resultcom_value2"),
        array("Stage" => "Stage_value3", "comment" => "comment_value3", "resultcom" => "resultcom_value3")
    );
    $arr = json_encode($arr);
    ?>
    <button id="button">Click Me</button>
    <div id="success"></div>
    <div id="error"></div>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script>
    $("document").ready(function(){
      $("button#button").on("click", function(){
        $( "#success" ).load( "table.php", { 'variable_value' : <?php echo $arr ?> }, function( response, status, xhr ) {
          if ( status == "error" ) {
            var msg = "Sorry but there was an error: ";
            $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
          }
        });
      });
    });
    </script>

【讨论】：