在Div容器中显示JSON字符串

时间:2015-09-16 01:48:26

标签: php jquery html mysql json

我能够构建 JSON数据的输出,并相应地显示;

[{ 
"DBColumn1": DataTXT, 
"DBColumn2": DataTXT, 
"DBColumn3": DataTXT, 
} ]

但是,我一直在尝试将所述数据显示到一个简单的 DIV(最好)/ table容器中。

以下是代码。

// Print out rows
$prefix = '';
echo "[\n";
while ( $row = mysql_fetch_assoc( $result ) ) {
  echo $prefix . " {\n";
  echo '  "pin_status": ' . $row['pin_status'] . ',' . "\n";
  echo '  "rep_empid": ' . $row['rep_empid'] . ',' . "\n";
  echo '  "rep_email": ' . $row['rep_email'] . ',' . "\n";
  echo '  "rep_username": ' . $row['rep_username'] . ',' . "\n";
  // echo '  "": ' . $row['value2'] . '' . "\n";
  echo " }";
  $prefix = ",\n";
}
echo "\n]";

// Close the connection
mysql_close($link);
?> 

非常感谢任何帮助。如果您可以编写一个显示所述信息的简单DIV布局,则可获得+10的赞誉。

这不是错误,或者“不工作”#34;我只是想将JSON数据放入一个简单的DIV / PHP表中,以便我可以查看所述数据。

2 个答案:

答案 0 :(得分:1)

我认为您正在尝试返回一个JSON响应,以便在代码的另一部分中使用。

要获得JSON响应,您可以尝试:

...
// Print out rows.
$response = array();
while ( $row = mysql_fetch_assoc( $result ) )
{
    $response[] = array('pin_status' => $row['pin_status'], 'rep_empid' => $row['rep_empid'], 'rep_email' => $row['rep_email'], 'rep_username' => $row['rep_username']);
}

// Response JSON.
header( "Content-Type: application/json" );
// Convert array to JSON.
$response = json_encode($response);

echo $response;

// Close the connection
mysql_close($link);
?>

我想你将表显示到一个新文件中,你创建了一个新文件来显示这个JSON响应?这个文件的结构如何。

您对如何使用AJAX感到困惑吗?

使用bootstrap作为解决方案的一部分,您的Filename.php可能如下所示:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>stackoverflow.com</title>

        <!-- Bootstrap -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    </head>

    <body>

        <div id="contents" class="row">
            <div class="col-md-3">pin_status</div>
            <div class="col-md-3">rep_empid</div>
            <div class="col-md-3">rep_email</div>
            <div class="col-md-3">rep_username</div>
        </div>

        <div id="htmldata"></div>

        <script type="text/javascript">
            jQuery.ajax({
                type: "GET",
                url: "json.php",
                dataType: "json",
                success: function(response){
                    $.each(response, function(key, value){
                        var html = '' +
                            '<div class="col-md-3">'+value.pin_status+'</div>'+
                            '<div class="col-md-3">'+value.rep_empid+'</div>'+
                            '<div class="col-md-3">'+value.rep_email+'</div>'+
                            '<div class="col-md-3">'+value.rep_username+'</div>';
                        $("#contents").append(html);
                    });
                }
            });
        </script>

    </body>
</html>

请注意,在此解决方案中,json.php文件需要与Filename.php保持相同的域名。

答案 1 :(得分:0)

...
// to understand where we start
// $prefix = ""; 
$array = array();
while ($row = mysql_fetch_assoc($result)) {
  $array[] = $row;
}

echo "<div>" . json_encode($array, JSON_PRETTY_PRINT) . "</div>";

mysql_close($link);