簡體   English   中英

使用Angular JS for WordPress JSON API使用JSON處理數據

[英]Manipulate Data with JSON using Angular JS for WordPress JSON API

我在這篇文章中測試了代碼,並做了一些修改以供使用。 但是我無法從使用WordPress JSON插件生成的博客API中獲取JSON對象。

  1. 來自BLOG的URL API(無效): http : //teckstack.com/api/get_recent_posts
  2. 來自W3C示例的網址(工作): http : //www.w3schools.com/website/Customers_JSON.php

當嘗試從我的博客(如上所述)中操作JSON API時,我陷入了困境,而相同的代碼可用於w3c示例提供的其他網址?

請提供您的建議。

我在.html文件中而不是在WordPress環境中使用以下代碼。

==== Angular JS腳本 ====

(function() {
    var app = angular.module('tsApp', []);
    app.controller('TSController', function($scope, $http) {
        $scope.heading = [];
        $http({
            method: 'GET',
            url: 'http://teckstack.com/api/get_recent_posts'
        }).success(function(data) {
            console.log("pass");
            $scope.heading = data; // response data 
        }).error(function(data) {
            console.log("failed");
        });
    });
})();

==== HTML ====

<html ng-app="tsApp">
<body ng-controller="TSController as tsCtrl">
        <article class="main-content" role="main">
            <section class="row">
                <div class="content">
                    <div class="name-list">
                        <h1>Dummy Title</h1>
                        <ul>{{ 1+1 }} (Testing AJS is working)
                            <li ng-repeat="title in heading" class="">
                                <h3>{{title.Name}}</h3>
                            </li>
                        </ul>
                    </div>
                </div>
            </section>
        </article>
        <script type="text/javascript" src="js/main.js"></script>
    </body>
</html>

我在在線檢查所有解決方案后提出了這個問題https://stackoverflow.com/a/26898082/1841647http://www.ivivelabs.com/blog/fix-cross-domain-ajax-request-angularjs-cors /但是對我沒有任何作用。

為方便起見,創建JSFiddle: http : //jsfiddle.net/236gdLnt/

這是一個跨域問題。 您可以通過使用JSONP進行請求來獲取第一個URL數據。 Angular使用$http.jsonp方法支持它:

$http.jsonp('http://teckstack.com/api/get_recent_posts?callback=JSON_CALLBACK')
   .success(function (data1) {
        console.log("BLOG pass");
        $scope.heading1 = data1; // response data 
    }).error(function (data1) {
        console.log("BLOG failed");
    });

確保將callback=JSON_CALLBACK參數添加到您的網址中。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM