如何在 MVC 中显示 SQL 数据库中的特定数据（AngularJS、HTML、PHP）答案

【问题标题】：How can I show specific data from SQL data base in MVC (AngularJS, HTML, PHP)如何在 MVC 中显示 SQL 数据库中的特定数据（AngularJS、HTML、PHP）
【发布时间】：2018-09-24 06:00:33
【问题描述】：

我正在开发一个简单的 Web 应用程序，它读取与某个 ID 匹配的名称作为输入，并在 HTML 表中显示名称。稍后，我可能会考虑分页（显示更多按钮等）。

我的 PHP 错误日志或控制台中没有出现任何错误，但是当我打开页面时没有显示任何内容。

我的数据库名为 DataList，有名为 Name 和 ID 的列。

PHP（在后端运行）：

$sql = "SELECT Name FROM DataList WHERE ID=1";
$result = $conn->query($sql);
$htmlTable = '<table border="1" cellspacing="0" cellpadding="2">
          <tr>';
$haveTable = 'no';


if ($result->num_rows > 0) {
  $haveTable = 'yes';
  while($row = $result->fetch_assoc()) {
    $htmlTable .= "<tr><td>".$row["Name"]."</td></td>";
  }
  $htmlTable .= "</tr>";
  return "$htmlTable";
} else {
  echo "You haven't input anything yet!";
}

mysqli_close($db);

?>

我的 HTML sn-p：（该文件名为 data.html，位于视图文件夹和正文中的 div 中）

<form id="nameViewForm" >
        <script> window.onload="displayNames()" ; </script>
        <div id="nameTable"></div>
        <button type="button" ng-click="switchForm('#dataInputForm')">Input 
Data</button>
</form>

我的 JS 控制器（名为 user.js 的文件，位于控制器文件夹中。）

    app.controller('dataCtrl', function($scope, $http) {

        $http.get("<website>/displayNames.php").then(function(res){

        });

        var config = {
            headers : {
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
            }
        }


        $scope.displayNames = function() {
          var data = $.param({

          });
          $http.get("<website>/displayNames.php", data, config).then(function(res) {
              console.log();
              var table = data.property;
              $scope.nameTable = table;
          });
        }

    });

我的逻辑是否存在根本缺陷，或者我是否在某个部分中搞砸了？

【问题讨论】：

大胆猜测，但尝试将return "$htmlTable"; 转换为echo $htmlTable; 是否会使响应显示在控制台中？
切换后控制台还是什么都没有

标签： javascript php mysql model-view-controller

【解决方案1】：

这就是我通常在表格中显示数据的方式。

首先我在 html 文件中创建一个表格，如下所示：

<table>
    <tbody>
        <tr ng-repeat="n in names">
            <td>{{n.name}}</td>
        </tr>
    </tbody>
</table>

并使用 ng-repeat 显示数据。

在我的 js 中，我获取所有名称并将它们放入范围变量中。

var app = angular.module('app', []);


app.controller('dataCtrl', function ($scope, $http) {

    $scope.getnames = function(){
        $http.get('<website>/displayNames.php')
        .then(function(response) {
            $scope.names = response.data;

        });
    }

    $scope.getnames();
});

在我的 php 文件中，我像这样简单地回显 json 数据

$sql = "SELECT Name FROM DataList WHERE ID=1";
$result = $conn->query($sql);

$names = array();


if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $names[] = $row;
    }
} 

$JSONReady = json_encode($names);

echo $JSONReady;

【讨论】：