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

Question

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

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

我们在 MAMP 服务器上运行，我知道我们的应用程序在 Apache 服务器上运行，但我们不知道为什么我们仍然没有获取 JSON 数据，但 HTML 作为 JSON 响应发送。

这是随附的代码：

市场.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);

市场控制器.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.");
        });
});

索引.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

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

您可以执行以下操作：

app.js之前的 index.html

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

控制器...

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

Answer 2

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

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

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

Answer 3

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

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

问题描述

3 个解决方案

解决方案1
1 2017-11-07 00:11:42

解决方案2
0 2017-10-30 19:44:55

解决方案3
0 已采纳 2017-10-31 16:30:10

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

问题描述

3 个解决方案

解决方案1 1 2017-11-07 00:11:42

解决方案2 0 2017-10-30 19:44:55

解决方案3 0 已采纳 2017-10-31 16:30:10

解决方案1
1 2017-11-07 00:11:42

解决方案2
0 2017-10-30 19:44:55

解决方案3
0 已采纳 2017-10-31 16:30:10