Question

我编写了一个非常基本的AngularJS脚本来解析JSON响应。当我运行它时，我得到404状态（错误），而在此之后它工作正常。我已经能够在谷歌浏览器和Opera上复制这种行为，而它在Firefox上工作正常。

可能是什么问题？

<body ng-app="myApp" ng-controller="FormCtrl">
    <form name="saveTemplateData" action="#">
        First name:<br/>
        <input type="text" ng-model="form.firstname"><br/><br/>
        <input type="text" ng-model="form.firstname1">
        <input type="submit" id="submit" value="Submit" ng-click="submitForm()" />
    </form>
    <ul>
        <li ng-repeat="friend in friends">
            {{friend.name}}, {{friend.house_no}}
        </li>
    </ul>

    <script src="angular.min.js"></script>  
    <script src = "step4.js"></script>
</body>
</html>

控制器如下：

var app = angular.module('myApp', []);
app.controller('FormCtrl', function ($scope, $http) {
    $scope.formData = {
        firstname: "default",
        firstname1: "default"
    };

    $scope.save = function () {
        formData = $scope.form;
    };

    $scope.submitForm = function () {
        console.log("posting data....");
        $scope.formData = $scope.form;

        $http({
            method: 'GET',
            url: 'http://localhost/testjson.php',
            params: {
                firstname: $scope.formData.firstname,
                firstname1: $scope.formData.firstname1
            }
        }).success(function (data) {
            //var pretty;
            $scope.friends = data.response.docs;
            //angular.toJson(data, [pretty]);
            var str = JSON.stringify(data, undefined, 2);
            //document.write(str);
            alert("success");
        }).error(function (data, status, headers, config) {
            alert(status);
        });
    };
});

PHP文件只返回一个虚拟JSON文件

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

    $state = $_GET['firstname'];
    $state1 = $_GET['firstname1'];

    $arr = '{
        "response": {
            "numFound": 1,
            "start": 0,
            "docs": [
                {
                    "name": "'.$state.'",
                    "house_no": "76"
                }
            ]
        }
    }';

    echo $arr;
?>

编辑：

进一步的问题诊断：

问题在于本地和全局URL（允许跨域访问的工作URL）
当我在文本框中输入值并提交时，会收到404错误并刷新页面。但是，如果我再次使用相同的信息重新提交表单，则会显示结果。这可能意味着获取结果，但在第一次执行get请求时会显示404错误。因为，上面是我的整个代码，我无法确定问题所在。
控制台中没有错误。在网络选项卡中，有以下详细信息

方法：GET

状态：已取消

Initiater：angular.js：8081

时间：待定

Answer 1

您是从文件系统提供html / js吗？即file：///angular-test.html

如果是这样，您可能会遇到跨源问题。有关可能的答案，请参阅this other question about angular and 404s。

Answer 2

你在本地运行，对吗？您需要在控制器的HTTP调用中向localhost添加端口：

（协议）：//本地主机：XXXX /

MAMP / LAMP通常是端口8888（您的PHP堆栈）

干杯和＆lt; 3 angular

Answer 3

angularJS上的大多数教程似乎都将操作字段留空，但事实证明根本不需要操作字段。

问题在于

行

<form name="saveTemplateData" action="#">

应该是

<form name="saveTemplateData">

从AngularJS Github issue收到的其他帮助。

AngularJS在首次运行时出现404错误

3 个答案: