如何在angularjs中显示响应数据

how to show response data in angularjs

本文关键字：显示 响应 数据 angularjs      更新时间：2023-09-26

我有以下代码，但我的页面不显示数据…;(我不现在为什么请帮助我，我是新的angularjs。我正在调用web API其工作良好控制台日志显示json记录，但在我的页面记录现在显示…为什么

  <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="Scripts/angular.min.js"></script>
        <script>
  var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
        $http.get("http://localhost:9000/employees").then(function (response) {
            $scope.myData = response.data;
        });
    });

    </script>
</head>
<body>
    <div ng-app="myApp" ng-controller="customersCtrl">
        <br>
       <p>Today's welcome message is:</p>
        <!--<h1>{{myWelcome}}</h1>-->
        <ul>
            <li ng-repeat="x in myData">
            <li ng-repeat="x in myData">
                {{ x.ProductName }} ',' {{ x.ProductDescription }}
            </li>
                <!--{{ x.ProductName + ', ' + x.ProductDescription }}-->
            </li>
        </ul>

    </div>
</body>
</html>

result = [{"ID":1,"ProductName":"xcxc","ProductDescription":"xcxc","UnitPrice":2323,"QtyAvailable":23}]chrome控制台日志

显示如下错误

XMLHttpRequest无法加载http://localhost:9000/employees。没有"访问-控制-允许-起源"标头出现在请求上资源。因此，不允许访问原点'null'。

      <li ng-repeat="x in myData">
            {{ x.FirstName }} ',' {{ x.LastName }}
      </li>

在你的代码中所有的东西都很好，可能angular没有加载或http没有响应正确:

     var app = angular.module('myApp', []);
     app.controller('customersCtrl', function($scope, $http) {
       $scope.myData = [{
         FirstName: "firts1",
         LastName: "last1"
       }, {
         FirstName: "firts2",
         LastName: "last2"
       }, ];
     });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<body>
  <div ng-app="myApp" ng-controller="customersCtrl">
    <br />
    <!--//  <p>Today's welcome message is:</p>-->
    <!--<h1>{{myWelcome}}</h1>-->
    <ul>
      <li ng-repeat="x in myData">
        {{ x.FirstName + ', ' + x.LastName }}
      </li>
    </ul>
  </div>
</body>
</html>

<li ng-repeat="x in myData">
 {{x.FirstName}}, {{x.LastName}}
</li>

我们必须使用JSONP来防止跨域策略。

var url = "http://localhost:9000/employees?callback=JSON_CALLBACK";
$http.jsonp(url)
    .success(function(data){
        console.log(data);
    });

或

如果您想禁用策略，请遵循以下步骤

为Windows……在桌面上创建Chrome快捷方式。右环>属性>快捷方式编辑"目标"路径:

"C:'Program Files'Google'Chrome'Application'chrome.exe" --args --disable-web-security

然后尝试使用您现有的代码

相关文章：