Fatal编程技术网
  • javascript/
  • Javascript 无法获取web api json响应的内容，返回空白

Javascript 无法获取web api json响应的内容，返回空白

javascript html angularjs json

Javascript 无法获取web api json响应的内容，返回空白,javascript,html,angularjs,json,Javascript,Html,Angularjs,Json,我是一个完全的前端编程初学者；然而，我在后端c#（非网络内容）方面经验丰富 我有两个视觉工作室开着。一个是提供web api，另一个是使用web api 如何从远程源读取和显示json？ 当尝试读取其中一个API时，该页面没有显示任何内容 我的HTML： <!doctype html> <html ng-app="myApp"> <head> <title>Hello AngularJS</title> <scr

我是一个完全的前端编程初学者；然而，我在后端c#（非网络内容）方面经验丰富

我有两个视觉工作室开着。一个是提供web api，另一个是使用web api

如何从远程源读取和显示json？

当尝试读取其中一个API时，该页面没有显示任何内容

我的HTML：

<!doctype html>
<html ng-app="myApp">
<head>
    <title>Hello AngularJS</title>

    <script src="Scripts/angular.js"></script>
    <script src="app.js"></script>
    <script src="controllers/GbyG.js"></script>
</head>

<body ng-controller="GbyG">

<table border="1">
    <tr ng-repeat="data in greeting">
        <td>{{data.FirstName}}</td>
    </tr>
</table>


</body>
</html>
app.js

'use strict';

app.controller('GbyG',
        function($scope, $http) {
            $http.get('http://localhost:36059/api/Samples/GetAllSamplesByStatusUser')
                .success(function(data) {
                    $scope.greeting = data;

                });
        }

);

'use strict';
var app = angular.module('myApp', []);
我正在阅读的json示例

[{"Sample":{"sampleid":1,"barcode":"129076","createdat":"2015-01-02T00:00:00","createdby":6,"statusid":3},"Status":"Report Generation","FirstName":"Clint","LastName":"Reid"},{"Sample":{"sampleid":2,"barcode":"850314","createdat":"2015-06-15T00:00:00","createdby":7,"statusid":3},"Status":"Report Generation","FirstName":"Kim","LastName":"Mullins"}]
如何从远程源读取和显示json？

这是plnkr

您可以在get调用中替换rest服务而不是tag.json，这是我用来测试的

您的JSON应该采用这种格式

[{
  "Status": "Report Generation",
  "FirstName": "Clint",
  "LastName": "Reid",
  "Sample": {
    "sampleid": 1,
    "barcode": "129076",
    "createdat": "2015-01-02T00:00:00",
    "createdby": 6,
    "statusid": 3
  }
}, {
  "Status": "Report Generation",
  "FirstName": "Kim",
  "LastName": "Mullins",
  "Sample": {
    "sampleid": 2,
    "barcode": "850314",
    "createdat": "2015-06-15T00:00:00",
    "createdby": 7,
    "statusid": 3
  }

}]
这是plnkr

您可以在get调用中替换rest服务而不是tag.json，这是我用来测试的

您的JSON应该采用这种格式

[{
  "Status": "Report Generation",
  "FirstName": "Clint",
  "LastName": "Reid",
  "Sample": {
    "sampleid": 1,
    "barcode": "129076",
    "createdat": "2015-01-02T00:00:00",
    "createdby": 6,
    "statusid": 3
  }
}, {
  "Status": "Report Generation",
  "FirstName": "Kim",
  "LastName": "Mullins",
  "Sample": {
    "sampleid": 2,
    "barcode": "850314",
    "createdat": "2015-06-15T00:00:00",
    "createdby": 7,
    "statusid": 3
  }

}]
参考文件

  • 使用
    。然后使用
    处理程序，而不是
    。成功
    ，因为后面的操作会被删除
  • 访问响应对象的
    数据
    属性，因为它保存
    数据
“严格使用”；
var-app=angular.module（'myApp'，[]）；
应用控制器（'GbyG'，
函数（$scope，$http）{
$http.get（'http://thetraveltemple.com/webservices/fetchCountry.php')
.then（功能（数据）{
$scope.greeting=data.data；
});
}
);


{{data.country{u name}


参考文件


    

  • 使用
    。然后使用
    处理程序，而不是
    。成功
    ，因为后面的操作会被删除
    • 

  • 访问响应对象的
    数据
    属性，因为它保存
    数据
    • 




“严格使用”；
var-app=angular.module（'myApp'，[]）；
应用控制器（'GbyG'，
函数（$scope，$http）{
$http.get（'http://thetraveltemple.com/webservices/fetchCountry.php')
.then（功能（数据）{
$scope.greeting=data.data；
});
}
);


{{data.country{u name}

只需检查控制台日志（数据）
。。。试试
$scope.greeting=data.data。。阅读关于还添加错误部分，以查看如果出现错误，将调用什么。错误（？），也可以看看这个来帮助你的api开发，它还可以给greta错误/响应（如果有）来检查你的api url是goodconsole.log（data）返回nothing返回一堆jsonJust check
console.log（data）
。。。试试
$scope.greeting=data.data。。阅读关于还添加错误部分，以查看如果出现错误，将调用什么。错误（？），也可以看看这一点来帮助你的api开发，它还可以给greta错误/响应，如果有，检查你的api url是goodconsole.log（数据）返回nothing在我的机器上返回一堆jsontried this:并得到以下结果：您没有包含您编写/复制的脚本…从
body
中删除
ng app
，仍然得到相同的结果，XMLHttpRequest无法加载。请求的资源上不存在“Access Control Allow Origin”标头。因此不允许访问源“”。这是一个安静的基本错误，不是吗。。。尝试使用我在示例中使用的URL并更新我…在我的计算机上尝试了以下操作：得到了以下结果：您尚未包含您编写/复制的脚本…从
正文中删除
ng app
，仍然得到相同的结果，XMLHttpRequest无法加载。请求的资源上不存在“Access Control Allow Origin”标头。因此不允许访问源“”。这是一个安静的基本错误，不是吗。。。请尝试使用我示例中的URL并更新我…感谢您将我介绍给plnkr这非常有用谢谢您将我介绍给plnkr这非常有用