http://moviestolike.pe.hu/get_all_products.php
我想获取这些数据并在索引中打印屏幕.html:
<!DOCTYPE html>
<html ng-app="todoApp">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
<body>
<div class="form-group" ng-controller="todoController">
<p>Movie list page</p>
<br>
<p>click button to see movies</p>
<div class="form-group" >
<div class="col-sm-10 col-sm-offset-2">
<button type="submit" class="btn btn-primary" ng-click="count = count + 1" ng-init="count=0">
<span class="fa fa-check"></span> count list movie</button>
<span>
count: {{count}}
</span>
<button type="submit" class="btn btn-primary" ng-click="listMovie()">
<span class="fa fa-check"></span> list movie</button>
</div>
</div>
<p>the Movis you want to list is:</p>
<p>list :{{list}}</p>
<p>{{listed}}</p>
<p>ss {{tasks}}</p>
</div>
</body>
</html>
我正在这个角度.js文件中做
/**
* Created by caneraydin on 16.03.2016.
*/
var app=angular.module('todoApp',[]);
app.controller('todoController',function($scope,$http){
var urlBase="";
$scope.toggle=true;
$scope.selection = [];
$scope.statuses=['ACTIVE','COMPLETED'];
$scope.priorities=['HIGH','LOW','MEDIUM'];
$http.defaults.headers.post["Content-Type"] = "application/json";
$scope.addMovie=function(title,actors){
$scope.title="title clicked "+title
$scope.actors="actors clicked "+actors
$scope.added="the movie '"+title+"' with those actors '"+actors+"' added successfully"
},
$scope.deleteMovie=function(id){
$scope.id="id clicked "+id
$scope.deleted="the movie with id '"+id+"' deleted successfully"
},
$scope.listMovie=function(list){
$scope.tasks=[];
$scope.list="list clicked"
$scope.list="list+list"+list
$scope.listed="the movies are listing:"+list
$http.get( 'http://moviestolike.pe.hu/get_all_products.php').
success(function (data) {
$scope.tasks=data.name
});
};
})
在列表电影中,但它无法发布数据。
我试图更改为数组,但仍然相同。
http://plnkr.co/edit/5xTe6v?p=preview
我根据注释更改了代码,但它仍在继续。它无法显示 JSON 数据。
当我制作
function myError(response) {
$scope.check = response;
});
我明白这个:
{"data":null,"status":-1,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"url":"http://moviestolike.pe.hu/get_all_products.php","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":""}
调用返回的数据没有直接的 name 属性。请将您的代码更改为此
$http.get( 'http://moviestolike.pe.hu/get_all_products.php').
success(function (data) {
$scope.tasks=data.products;
});
在您的 HTML 中,您可以直接查看您的任务,如下所示
<p>ss {{tasks | json}}</p>
或按此方式查看每个产品
<div ng-repeat="prod in tasks">Name: {{prod.name}}</div>
编辑
在你的 plunker 中,看到控制台,它说
XMLHttpRequest cannot load http://moviestolike.pe.hu/get_all_products.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://run.plnkr.co' is therefore not allowed access.
这意味着 CORS 在服务器上不可用,因此您无法从访问的位置访问它(plunkr 也是如此)
您需要在后端启用 CORS。
您可以从以下链接获得有关此方面的帮助:https://remysharp.com/2011/04/21/getting-cors-working
根据 http://moviestolike.pe.hu/get_all_products.php 的回应
{"products":[{"pid":"1","name":"sogan","price":"19.30","created_at":"2016-03-12 15:08:38","updated_at":"0000-00-00 00:00:00"},{"pid":"2","name":"faltak","price":"22.00","created_at":"2016-03-12 15:08:38","updated_at":"0000-00-00 00:00:00"}],"success":1}
您应该更改此内容:
$http.get( 'http://moviestolike.pe.hu/get_all_products.php').
success(function (data) {
$scope.tasks=data.name});
对此:
$http.get( 'http://moviestolike.pe.hu/get_all_products.php').
success(function (data) {
$scope.tasks=data.products });
或者这个:
$http.get( 'http://moviestolike.pe.hu/get_all_products.php')
.then(function (response) {
$scope.tasks=response.data.products
});