2017-02-24 5 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

を追加しましたか? console.logにエラーがありましたか? –

+0

あなたのPHPコードは有効ではありません。ハンドルバー 'echo($ outp); } 'そして最後はあなたのコードを壊しています。 – lin

+0

現在、私は画面に何も表示されず、コンソールには何も表示されません。ちょうど今ネットワーク状況を見て、しばらくそれをデバッグしようとしています。代わりにprint($ outp);}と置き換える必要がありますか? –

答えて

0

私はこの問題を解決しています。このコードを試してみてください。ここに新しいangular.min.jsを追加し、応答が何であるdb_con.php`file `ご覧に参照する場合、いくつかの変更が

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 
 
?>

関連する問題