2017-02-24 84 views
1

有人可以告诉我我在这里缺少什么代码来显示我的数据库中的数据?非常感激!AngularJS + PHP + MySQL来显示数据库中的数据

HTML

<!DOCTYPE html> 
    <html lang="en" ng-app="VinylApp"> 
    <head> 
     <meta charset="utf-8">  
     <title>Vinyl Record Store</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> 
     <script src="script.js"></script><script src="app.js"></script> 
     <link rel="stylesheet" href="main.css"> 
    </head> 

    <body> 
    <div ng-app="VinyApp" ng-controller="VinylListController"> 

     <table> 
     <tr ng-repeat="vinyl in vinyls"> 
      <td>{{vinyl.Vinyl_ID}}</td> 
      <td>{{vinyl.VinylName}}</td> 
      <td>{{vinyl.Artist}}</td> 
      <td>{{vinyl.Price}}</td> 
     </tr> 
     </table> 
    </div> 
    </body> 
</html> 

JS

var app= angular.module('VinylApp', []); 
app.controller('VinylListController', function($scope, $http){ 
    $http.get("db_con.php") 
    .then(function(response){ 
    $scope.vinyls = response.data.records;  
    }); 
}); 

PHP

<?php 
    header("Access-Control-Allow-Origin: *"); 
    header("Content-Type:application/json; charset=UTF-8"); 

    $conn = new mysqli("myServer","myUser", "myPassword", "Northwind"); 
    $result = $conn->query("SELECT * FROM vinyl"); 
    $outp= ""; 
    while($rs=$result->fetch_array(MYSQLI_ASSOC)){ 
    if ($outp != "") {$outp .= ",";} 
    $outp .= '{"VinylID":"' . $rs["VinylID"] . '",'; 
    $outp .= '"VinylName":"' . $rs["VinylName"]  . '",'; 
    $outp .= '"Artist":"'. $rs["Artist"]  . '",'; 
    $outp .= '"Price":"'. $rs["Price"]  . '"}'; } $outp ='{"records":['.$outp.']}'; $conn->close(); 

    echo($outp); 
    } 

?> 
+0

如果您浏览到'db_con.php'file是什么反应,你看到了什么?您是否在console.log中查找任何错误? –

+0

您的PHP代码无效。句柄'echo($ outp); }'最后是打破你的代码。 – lin

+0

目前我的屏幕上没有任何东西,控制台也没有显示任何东西。现在只需查看网络状态,现在尝试调试一段时间。我应该用print($ outp)替换它吗?)而不是? –

回答

0

我必须解决的问题。请尝试此代码对我来说工作很好。在这里添加新angular.min.js和一些变化添加

var app= angular.module('VinylApp', []); 
 
app.controller('VinylListController', function($scope, $http){ 
 
    $http.get("db_con.php") 
 
    .then(function(response){ 
 
    $scope.vinyls = response.data;  
 
    }); 
 
});
<!DOCTYPE html> 
 
    <html lang="en" ng-app="VinylApp"> 
 
    <head> 
 
     <meta charset="utf-8">  
 
     <title>Vinyl Record Store</title> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script> 
 
\t <script src="app.js"></script> 
 
     <script src="script.js"></script> 
 
     
 
    </head> 
 
    <body ng-app="VinyApp"> 
 
    <div ng-controller="VinylListController"> 
 
     <table> 
 
     <tr ng-repeat="vinyl in vinyls"> 
 
      <td>{{vinyl.Vinyl_ID}}</td> 
 
      <td>{{vinyl.VinylName}}</td> 
 
      <td>{{vinyl.Artist}}</td> 
 
      <td>{{vinyl.Price}}</td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    </body> 
 
</html> 
 
    
 
    
 
<?php 
 
    
 
    $conn = new mysqli("localhost","root", "", "pinakin_northwind"); 
 
    $result = $conn->query("SELECT * FROM vinyl"); 
 
    $outp = array(); 
 
    while($rs = $result->fetch_array(MYSQLI_ASSOC)) { 
 
\t \t $outp[] = $rs; 
 
    } 
 
\t echo json_encode($outp); \t 
 
?>