Question

我是角度js的新手。我尝试制作一个小程序，包含使用角度js $ http的ajax调用。我想我有些错误，做了一些错误。如果有人帮忙，会很高兴。以下是代码段

的login.html

    <head></head>

    <body>
        <form ng-app="" ng-controller="validateCtrl" name="myForm" novalidate>
            <div ng-hide="var">
                 <h2><center>SIGN-IN</center></h2>

                <p>Username:
                    <br>
                    <input type="text" name="user" ng-model="user" required><span style="color:red" ng-show="myForm.user.$error.required" />Username is required</p>
                <p>Password:
                    <br>
                    <input type="password" name="password" ng-model="password" required /> <span style="color:red" ng-show="myForm.password.$error.required">Password is required.</span>

                    <p>
                        <input type="submit" ng-click="validate()" ng-disabled=" myForm.user.$invalid ||  
 myForm.password.$invalid" />
                    </p>
            </div>
            <div ng-hide="welcomeVar"> <span> {{ listOfCustomers  }} </span> 
                 <h2><center>Welcome! {{ user }}</center></h2>

                <button class="list" ng-click="customerList()">List of Customers</button>
                <ul>
                    <li ng-repeat="x in listOfCustomers">{{ x.CustomerID + ', ' + x.CompanyName }}</li>
                </ul>
                <br>
                <button class="signout" ng-click="validate()">Log Out</button>
            </div>
        </form>

JS部分：

<script>
            function validateCtrl($scope, $http) {
                $scope.user = 'ABC XYZ';
                $scope.password = 'abcbc';
                $scope.welcomeVar = true;

                $scope.
                var = false;
                $scope.validate = function() {
                    $scope.
                    var = !$scope.
                    var;
                    $scope.welcomeVar = !$scope.welcomeVar
                };
                $scope.listOfCustomers = null;

                $scope.customerList = function() {
                    $http.get("http://www.iNorthwind.com/Service1.svc/getAllCustomers")
                        .success(function(data) {
                        $scope.listOfCustomers = data;
                    })
                        .error(function(data) {
                        $scope.user = 'Xyz';
                    });
                };
            }
        </script>

Answer 1

您的代码很好，除了一些语法错误，但我希望这是因为您在此处发布代码之前尝试删除了somrthing;）

您的请求的响应也具有以下结构：{GetAllCustomersResult：[//这里是一个元素数组]}，因此，在成功响应处理程序中，您必须执行：$scope.listOfCustomers = data.GetAllCustomersResult;

但这是一个小问题，这里描述的主要问题是：

AngularJS performs an OPTIONS HTTP request for a cross-origin resource

要对此进行调试，您必须在任何浏览器中打开开发人员工具（“F12”是打开它的常用键），并查看控制台和网络请求。

使用角度js的ajax调用出错

1 个答案: