0

概念的にはタグをクリックするだけで、JSON結果を返すRESTサービスを呼び出し、国名を取得してテストとして表示します。私は角度を使用しています。

クリックするたびに、ステータスが 0 で返されます。これが plnker であると信じてください

これは、 ng-click を介して GetInfo 関数を呼び出すだけの HTML です。

<!DOCTYPE html>
<html ng-app="mainModule">
<!--http://plnkr.co/edit/k3Z6Ufi734oYE4ciVJs8-->
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>    
    <link href="style.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>

        <div><b ng-click="GetInfo()">Click Me</b></div>

    <b>{{AdditionalInfo.geobytescountry}}</b>
  </body>

</html>

これが Angular バックエンドです。

var app = angular.module('mainModule', []);

app.controller('MainCtrl', function($scope, $http) {
  $scope.name = 'World';

  var cityDetailsUrl = "http://gd.geobytes.com/GetCityDetails?callback=?&fqcn=new%20york,%20NY,%20United%20States";

   $scope.AdditionalInfo =  {};

   $scope.GetInfo =  function ()
   {
       $http.get(cityDetailsUrl)
              .success(function(data, status, header, config){
                      console.log('ok'); 
                      $scope.AdditionalInfo = data; 
                      console.log(data);})
              .error(function(data, status, header, config){
                      console.log('error'); 
                      $scope.AdditionalInfo = data; 
                      console.log(status);});
   }


});

提供されたリンクは、Web ブラウザーで id を試したときに JSON 応答になるはずです。この "geobytesinternet":"US","geobytescountry":"United States" のような

4

2 に答える 2