时间戳

首页 > 解决方案 > Ajax 在数组中显示 json 数据

javascript - Ajax 在数组中显示 json 数据

问题描述

我在一个表中有一些 MySQL 数据，每一行都有一个按钮。如果我单击该按钮，则会出现一个带有该数据的引导模式。我将 MySQL 数据转换为 json。.view_data 是每一​​行的按钮。如何将 id 发布到 data.php 并将 json 以模态形式发送到表中？我正在尝试解决这个问题，但我是 JavaScript 新手，我无法解决这个问题。

它实际上有效，但如果我打开其中一个模式，数据将显示在数组中： 在此处输入图像描述

我在一个表中有一些 MySQL 数据，每一行都有一个按钮。如果我单击该按钮，则会出现一个带有该数据的引导模式。我将 MySQL 数据转换为 json。.view_data 是每一​​行的按钮。如何将 id 发布到 data.php 并将 json 以模态形式发送到表中？我正在尝试解决这个问题，但我是 JavaScript 新手，我无法解决这个问题。它实际上有效，但如果我打开其中一个模式，数据将显示在数组中：

索引.php

<div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="basicModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel"></h4>
      </div>
      <div class="modal-body" id="moreInfo">
        <div class="table-responsive">  

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
</div>

        <script>
            $(document).ready(function(){
                $('.view_data').click(function(){  
                    var data_id = $(this).attr("id");  
                    $.ajax({  
                        url:"data.php",
                        method:"post",  
                        data:{data_id:data_id},  
                        success:function(data){  
                            $('#moreInfo').html(data);  
                            $('#dataModal').modal("show");  
                        }  
                    });  
                });

                $.ajax({
        url: 'data.php',
        type: 'get',
        dataType: 'JSON',
        success: function(response){
            var len = response.length;
            for(var i=0; i<len; i++){
                var id = response[i].id;
                var table1 = response[i].table1;
                var table2 = response[i].table2;
                var conn = response[i].conn;

                var tr_str = "<tr>" +

                    "<td align='center'>" + table1 + "</td>" +
                    "<td align='center'>" + table2 + "</td>" +
                    "<td align='center'>" + conn + "</td>" +
                    "</tr>";

                $("#userTable").append(tr_str);
            }

        }
    });
});

        </script>

数据.php

$id=$_POST["data_id"];

    echo $html = '<table id="userTable" class="table table-bordered"><tr>  
                    <td align="center"><label><b>Data</b></label></td>  
                    <td align="center"><label><b>Connect to</b></label></td>  
                    <td align="center"><label><b>Description</b></label></td>
                </tr> 
                </table></div>';

    if ($conn){
    if(isset($id)) { 
    $sql=$conn->prepare("SELECT table1.table1_id AS id1, table1.data AS table1,
                                GROUP_CONCAT(DISTINCT(table2.data) SEPARATOR ', ') AS table2,
                                GROUP_CONCAT(DISTINCT(table1_table2.connection) SEPARATOR ', ') AS conn
                                FROM table1
                                LEFT JOIN table1_table2 ON table1.table1_id = table1_table2.table1_id
                                LEFT JOIN table2 ON table2.table2_id = table1_table2.table2_id
                                WHERE table1.table1_id=?
                                GROUP BY table1.table1_id");

            $sql -> bind_param('i', $id);
            $sql -> execute();
            $result = $sql -> get_result();
            $sql -> close();

            while($row= mysqli_fetch_assoc($result)){
                $id = $row['id1'];
                $table1 = $row['table1'];
                $table2 = $row['table2'];
                $conn = $row['conn'];

                $return_arr[] = array("id" => $id,
                    "table1" => $table1,
                    "table2" => $table2,
                    "conn" => $conn);
            }
    }
            echo json_encode($return_arr);
    }

标签： javascriptphpjquerymysqljson

解决方案

您可以创建一个生成 HTML 表的函数，并在两个请求回调中使用它：

$(document).ready(function(){
    $('.view_data').click(function(){  
        var data_id = $(this).attr("id");  
        $.ajax({  
            url:"data.php",
            method:"post",  
            data:{data_id:data_id},  
            success:function(data){
                generateTable(data, $('#moreInfo'));

                $('#dataModal').modal("show");  
            }  
        });  
    });

    $.ajax({
        url: 'data.php',
        type: 'get',
        dataType: 'JSON',
        success: function(response){
            generateTable(response, $("#userTable"));
        }
    });
});

function generateTable(response, table){
    var len = response.length;

    for(var i=0; i<len; i++){
        var id = response[i].id;
        var table1 = response[i].table1;
        var table2 = response[i].table2;
        var conn = response[i].conn;

        var tr_str = "<tr>" +

            "<td align='center'>" + table1 + "</td>" +
            "<td align='center'>" + table2 + "</td>" +
            "<td align='center'>" + conn + "</td>" +
            "</tr>";

        table.append(tr_str);
    }
}

推荐阅读