从PHP查询中获取JSON数组后，用javascript编写JSON数组到html页面

Writing JSON array to html page with javascript after getting it from PHP query

本文关键字：JSON 数组 javascript 编写 页面 html 查询 PHP 获取      更新时间：2023-09-26

我有一个MySQL查询，我传递给一个PHP数组。PHP数组使用json_encode转换为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>

我已经在StackOverflow上阅读了其他类似的问题，没有运气;我的HTML页面完全是空白的。我试过把json_econde(...)在javascript变量jsonArray内，而不是在我的PHP类。这也没起作用。我还var_dump 'd PHP数组没有问题(整个事情显示在页面上)，以及使用json_encode将数组放在PHP变量中，然后响应该数组没有问题。

我不知道如何访问这个JSON数组。我最终希望它在一个表中，但因为这是我第一次弥合PHP和Javascript之间的差距，我想我应该一步一步来，这样我就能确切地知道发生了什么。

尝试改变你的函数(不要使用echo !but return something) to:

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();

从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>
相关文章：