$http.get returns index.html 代码，不是来自 php 数据库调用的数据

Question

我的 M*EAN 应用程序应该使用 php 从数据库 return 数据到 Angular 端，但是当控制器运行s 和 $ http.get 执行，response.data return 代替 index.html 的源代码。

我认为帮助我们找到错误所需的所有代码都在下面。还有一些屏幕截图显示了应用程序在 Chrome 中使用开发人员工具时发生的情况，以便您确切地知道我在说什么。

我们在 MAMP 服务器上运行ning，我知道我们的应用程序在 Apache 服务器上运行ning，但我们不知道为什么我们仍然没有得到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>

截图：

Answer 1

可能找不到 url /market.php，在这种情况下，您使用的 HTTP 服务器正在重定向到 index.php。

另一种情况可能是重定向工作正常，但服务器无法识别会话并将您重定向到 index.html 进行登录。

尝试在浏览器中打开/market.php查看。

Answer 2

看起来您是运行 angular 在 localhost:3000 的本地开发网络服务器，它无法处理 PHP 脚本。您将需要使用 WAMP/MAMP、Vagrant 或 Docker 来管理您的 PHP/mysql 环境。

Answer 3

一旦你的 backend/api 启动并运行，你可能还想将 API 的 url 添加到你的 $http.get，当前调用是相对的，因此它将尝试 http://localhost:3000/market.php

您可以这样做：

index.html 在 app.js

之前

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

控制器...

$http({method: 'GET', url: window.api + '/market.php'})...

$http.get returns index.html 代码，不是来自 php 数据库调用的数据

$http.get returns index.html code, not data from php database call

html

javascript

php

http-get

angularjs