2017-10-30 6 views
1

私のM * EANアプリケーションは、PHPを使用してデータベースからAngular側にデータを返しますが、コントローラが実行されると$ http.get実行すると、response.dataは代わりにindex.htmlのソースコードを返します。

私がバグを見つけるのに必要なコードはすべて次のとおりです。また、デベロッパーツールを使用してChromeでアプリを実行すると、何が起こっているのかについてのスクリーンショットが表示されるので、私が話していることを正確に知ることができます。

私たちはMAMPサーバー上で動作していますが、私たちのアプリがApacheサーバー上で動作していることはわかっていますが、まだJSONデータが得られない理由はわかりませんが、HTMLはJSON応答。

market.php

<?php 
header("Access-Control-Allow-Origin: *"); 
include 'dbConfig.php'; 

$sel = mysqli_query($con,"select * from Chef"); 
if (!$sel) { 
    printf("Error: %s\n", mysqli_error($con)); 
    exit(); 
} 
$data = array(); 

while ($row = mysqli_fetch_array($sel)) { 
    $point = array("fullname"=>$row["fullname"],"city"=>$row["city"],"state"=>$row["state"],"zip_code"=>$row["zip_code"],"rating"=>$row["rating"]); 
    array_push($data, $point); 
} 

header('Content-type: application/json; charset=utf-8'); 
echo json_encode($data); 

marketControllers.js

angular.module('OrchidApp') 

.controller('marketController', function ($scope, $http) { 
    console.log('ANYTHING'); 
    $scope.users=[]; 
    $http({method: 'GET', url:'market.php', headers:{ 'X-Force-Content-Type': 'application/json' }}) 
     .then(function successCallback(response) { 
      $scope.users = response.data; 
      console.log($scope.users); 
      console.log("There is data here."); 
      return $scope.users; 
     }, function errorCallback(response) { 
      console.log(response.data); 
      console.log("Error."); 
     }); 
}); 

index.htmlを

<!doctype html> 
    <html lang="en" ng-app="OrchidApp" > 
     <head> 
      <title>Orchid</title> 
      <meta charset="utf-8"> 
      <base href="/"> 
      <meta http-equiv="x-ua-compatible" content="ie=edge"> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script> 

      <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular-cookies.min.js"></script> 

      <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.min.js"></script> 

      <script src="/js/app.js"></script> 
      <script src="/js/authService.js"></script> 
      <script src="/js/profileController.js"></script> 
      <script src="/js/marketControllers.js"></script> 
      <script src="/js/navController.js"></script> 
      <script src="/js/loginController.js"></script> 
      <script src="/js/signupController.js"></script>  
     </head> 
     <body class="container"> 
      <div ng-controller="marketController"> 
       <p>Above the table.</p> 
       <table> 
        <tr ng-repeat="user in users track by $index"> 
         <td>{{user.fullname}}</td> 
         <td>{{user.city}}</td> 
         <td>{{user.state}}</td> 
         <td>{{user.zip_code}}</td> 
         <td>{{user.rating}}</td> 
        </tr> 
       </table> 
       <p>Below the table.</p> 
      </div> 
     </body> 
    </html> 

スクリーンショット:

はここに添付のコードです

General + response header

Request Headers

Response.data output

答えて

0

あなたがローカルホストでの角度ローカル開発Webサーバを実行しているように見えます:3000、PHPスクリプトを処理することができないです。 PHP/mysql環境を管理するには、WAMP/MAMP、Vagrant、Dockerのようなものを使用する必要があります。それはあなたが好きな何かをすることhttp://localhost:3000/market.php

を尽くすよう

0

のURL /market.phpはおそらく見つからないと、使用しているHTTPサーバは、このような場合にはindex.phpにリダイレクトされます。

別のケースでは、リダイレクトは正常に動作しますが、サーバーはセッションを認識せず、ログインのためにindex.htmlにリダイレクトしている可能性があります。

ブラウザで/market.phpを開いてみてください。

+0

ありがとうございます。私は何を探していますか?私が/market.phpにアクセスすると、エラーなしで同じことがロードされます。 –

+0

これと同じこと - htmlまたは予期されるjsonデータ? –

1

あなたのバックエンド/ APIの起動および実行を得れば、あなたも自分の$http.getにAPIのURLを追加したいかもしれませんが、コールは現在、相対的なものです:

index.htmlをapp.js

<script> 
window.api = "http://localhost:3001" 
</script> 

コントローラの前に...

$http({method: 'GET', url: window.api + '/market.php'})... 
関連する問題