【问题标题】:$http get in Angular Js$http 获取 Angular Js
【发布时间】:2016-05-22 04:57:18
【问题描述】:

结果页面为空,不显示任何数据

Js 文件包含:

var Movies = angular.module('Movies', []);
Movies.controller('MoviesController',['$scope', '$http', function      
($scope, $http) {
    $http.get('http://localhost:19290/CinemaAngularJs/JS/data.json')
    .success(function (data) {
      $scope.Movies = data.Movs;
    })
    .error(function (data) {
      alert("Error occur");
    });
}]);

Data.json 文件包含:

"Movs":[
{
  "name":"Mision Impossible",
  "img":"mi",
  "year":"2012",
  "short":"Mision Impossible 2012 Mision Impossible 2012Mision Impossible  
2012 Mision Impossible 2012",
  "description":"Mision Impossible 2012 Mision Impossible 2012Mision 
},
{
.............
}]

HTML 文件包含:

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="Movies">
<head runat="server">
  <title></title>    
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.1/angular2.min.js"></script>
  <script src="angular.min.js"></script>
  <script src="JS/controller.js"></script>
</head>
<body>
  <form id="form1" runat="server">
    <div ng-controller="MoviesController">
      <ul class="large-block-grid-4 small-block-grid-2">
        <li ng-repeat="mov in Movies">
           <h2>name : {{mov.name}}</h2>
           <img ng-src="Img/{{mov.img}}.jpg" alt="Image Here" />
           <h3>year : {{mov.year}}</h3>
           <h3>year : {{mov.short}}</h3>
           <h3>year : {{mov.description}}</h3>
         </li>
      </ul>
    </div>
  </form>
</body>
</html>

什么是代码错误? 我应该怎么做才能运行代码?

【问题讨论】:

  • 对您的问题感到一点自豪。清理它,我们会提供帮助。
  • 代码没有问题(但我确实在 angular 1.4 vs 2.0 中运行过)jsfiddle.net/ncapito/zsj835mc/2 我建议你看看你的数据并确保它正确返回。跨度>

标签: javascript asp.net angularjs json json.net


【解决方案1】:

请 console.log(data) 并检查它。是有效的 JSON 对象还是 JSON 字符串? 我认为我们需要:

$http.get('http://localhost:19290/CinemaAngularJs/JS/data.json').success(function (data) {
    var temp =JSON.parse(data);
    $scope.Movies = temp.Movs;
    })
    .error(function (data) {
        alert("Error occur");
    });

【讨论】:

  • 我也没有任何结果“空页”
【解决方案2】:

您的 JSON 无效,请尝试以下操作:

{
	"Movs": [{
		"name": "Mision Impossible",
		"img": "mi",
		"year": "2012",
		"short": "Mision Impossible 2012 Mision Impossible 2012Mision Impossible 2012 Mision Impossible 2012",
		"description": "Mision Impossible 2012 Mision Impossible 2012Mision"
	}]
}

我已经验证了这段代码,没问题。

您的角度代码是正确的,但您可以验证结果是否包含任何数据并显示警告。只是一个建议。

【讨论】:

    【解决方案3】:

    在浏览器中按 F12 运行开发者工具。您是否在控制台窗口中显示任何错误消息?

    这将向您显示语法中的任何错误...但不会显示您的逻辑!

    更新: 您的 JSON 无效。 尝试将其粘贴到www.jsoneditoronline.org 以亲自查看。

    你能把你的 JSON 改成:

    {
    "Movs": [{
        "name": "Mision Impossible",
        "img": "mi",
        "year": "2012",
        "short": "Mision Impossible 2012 Mision Impossible 2012Mision Impossible 2012 Mision Impossible 2012",
        "description": "Mision Impossible 2012 Mision Impossible 2012Mision"
    }]
    }
    

    【讨论】:

    • 在浏览器控制台窗口中运行代码并按F12时为空“没有错误”
    • 那么代码没有任何错误。你正在加载的文件呢?你知道应用程序是否正在阅读它吗?
    • 页面无法读取json文件我想知道为什么?我想在 html 页面中查看 json 文件。
    • JSON 无效。我会更新我的答案给你看。
    猜你喜欢
    • 2013-02-07
    • 2019-08-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多