从 PHP 查询中获取 JSON 数组后，使用 javascript 将 JSON 数组写入 html 页面
Posted
技术标签:
【中文标题】从 PHP 查询中获取 JSON 数组后，使用 javascript 将 JSON 数组写入 html 页面【英文标题】：Writing JSON array to html page with javascript after getting it from PHP query 【发布时间】：2015-07-30 16:01:16 【问题描述】：我有一个传递给 php 数组的 mysql 查询。使用json_encode 将 PHP 数组转换为 JSON 数组。我正在尝试将其打印到我的 html 页面上。这是我目前所拥有的。
<?php
class db
public $conn;
function dbLogin()
$this->conn = new mysqli("1.2.3.4","user","pwd","db");
public function selectQuery()
$this->dbLogin();
$query = "
SELECT *
FROM tekken_7_frame_data
";
echo "<pre>";
$resultArray = Array();
if ($result = $this->conn->query($query))
while ($row = $result->fetch_array())
$resultArray[] = $row;
echo "</pre>";
$resultJson = json_encode($resultArray);
$fData = new db();
$fData->selectQuery();
?>
<html>
<head>
</head>
<body>
<script>
var jsonArray = <?php echo $resultJson ?>;
document.write(jsonArray);
for (i = 0; i < jsonArray.length; i++)
document.write(jsonArray[i][1]);
</script>
</body>
</html>
我在 *** 上阅读了其他类似的问题，但没有运气；我的 html 页面是完全空白的。我尝试将json_econde(...) 放在javascript 变量jsonArray 中，而不是放在我的PHP 类中。那也没有用。我还 var_dump'd 没有问题的 PHP 数组（页面上显示的整个内容），以及使用 json_encode 将数组放在 PHP 变量中，然后毫无问题地回显该数组。
我不知道如何访问这个 JSON 数组。我最终希望它在一个表格中，但因为这是我第一次弥合 PHP 和 Javascript 之间的差距，所以我想我会一步一步来，这样我就可以确切地知道发生了什么。
【问题讨论】：
您是否尝试过直接回显 php 变量来隔离问题？即问题是PHP 还是JS？您查看过页面源吗？检查控制台，确保 JS 运行良好？ 是的，我应该补充一下。我有var_dump'd PHP 数组没有问题。我已经使用json_encode 将 PHP 数组放入一个变量中，然后打印该变量也没有问题。两个数组都完整显示在页面上。当我显示两个数组时，控制台中也没有错误。
另外，代码有点奇怪。您应该返回一个值，或者在函数中回显。问题可能是出现在函数中的$resultJson 变量，然后也出现在JS 部分中。我建议您编辑您的函数以不回显<pre>，并返回数组。然后你会得到类似$result = $db->selectQuery();，然后是echo $result;。
你在for 循环中有错字。它应该是i < jsonArray.length，而不是i > jsonArray.length。这导致循环立即结束而不打印任何内容。
哈哈 Barmar 可能已经发现了问题所在。此外，批评 DB 类：应该有类名的首字母大写，该字段应该是私有的，并且应该在构造函数中建立连接，而不是为您所做的每个查询建立连接 :) 我认为有一个 fetch_all 或类似的方法首先将结果作为数组返回！
【参考方案1】：
尝试将您的功能（不要使用echo！而是使用return）更改为：
public function selectQuery()
$this->dbLogin();
$query = "
SELECT *
FROM tekken_7_frame_data
";
$resultArray = Array();
if ($result = $this->conn->query($query))
while ($row = $result->fetch_array())
$resultArray[] = $row;
return json_encode($resultArray);
在下面：
$fData = new db();
$resultJson = $fData->selectQuery();
【讨论】：
这个答案非常可靠。这正是我所需要的。这通常是如何通过 JSON 将 PHP 数组传递给 Javascript 的吗？ 有很多方法可以做同样的事情，我只是根据我在你的帖子中看到的逻辑修复了你的代码:-)【参考方案2】：将数据从 PHP 获取到 JavaScript 的最佳方式是使用异步请求（即“AJAX”）。
JavaScript 库大大简化了这个过程。这是一个使用 AngularJS (http://angularjs.org) 的粗略示例。
json.php
// this file JUST needs to print JSON as string.
<?php
class db
public $conn;
function dbLogin()
$this->conn = new mysqli("1.2.3.4","user","pwd","db");
public function selectQuery()
$this->dbLogin();
$query = "
SELECT *
FROM tekken_7_frame_data
";
$resultArray = Array();
if ($result = $this->conn->query($query))
while ($row = $result->fetch_array())
$resultArray[] = $row;
return json_encode($resultArray);
$fData = new db();
print $fData->selectQuery();
?>
myscript.js
// this will fetch your JSON string from the PHP file and
// set $scope.myData to a JS object.
// it sets $scope.myDataString to a JSON stringified format.
angular.module('myApp' [])
.controller('myController', function($http, $scope)
var $scope.myData = ;
var $scope.myDataString = '';
function getMyData ()
$http.get('/json.php')
.success( function (data)
$scope.myData = data;
$scope.myDataString = JSON.stringify(data);
)
.error(function (err)
$scope.myData = error: err;
$scope.myDataString = "ERROR: "+JSON.stringify(data);
)
getMyData();
mypage.html
<!-- include angular and your app's file.
make sure to link in your app and controller -->
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src='myscript.js'>
</head>
<body ng-app='myApp'>
<main ng-controller='myController as myCtrl'>
<div id='myOutput'>myDataString</div>
</main>
</body>
</html>
【讨论】：
这是一个很棒的答案。感谢您花时间写这篇文章。一旦我对处理 JSON 数组感到更舒服一点，我将在一周左右的时间里回到这个问题上。无论如何，我的下一个任务是应用一些 AJAX，所以我一定会使用这个答案。在应用 Angular 方面我还有一点距离，但如果学习曲线不是太糟糕，那么我也会应用你的帖子。以上是关于从 PHP 查询中获取 JSON 数组后，使用 javascript 将 JSON 数组写入 html 页面的主要内容，如果未能解决你的问题，请参考以下文章