Divコンテンツを自動的に更新する

私はいくつかのボックスを表示するHTMLページを持っています。これらのボックスには、json（URLファイル）からロードするデータがあります。 JSonは2分ごとに変更されるため、データを更新する必要がありますが、ページ全体を更新する必要はありません。私はAjaxとJqueryを使ってみましたが、あまりにも混乱しました。誰かがAngularJS $ httpサービスを使ってやっていると私に言った。もしそうなら、誰でも私にそれを行う方法の例を示すことができますか？Divコンテンツを自動的に更新する

これは私がこれまで持っているものです。

これは、これは私の 'script.js' ファイル

再び

angular.module('myApp', []); 
angular.module('myApp').controller('myCtrl', ['$scope', '$http', function ($scope, $http) { 

    $http({ 
     method: 'GET', 
     url: '/MyWebApp/JsonData' 

    }).then(function successCallback(response) { 
     console.log("Success yay!"); 
     console.log(response); 
     $scope.myArray = response.data; 

    }, function errorCallback(response) { 
     console.log("Oops in error!"); 
    }); 
}]);

である私の 'index.htmlを'

<html ng-app="myApp"> 

    <head>   
    <title>My data page</title>  
    <script data-require="[email protected]*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0- beta.6/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body ng-controller="myCtrl"> 

     <div class ="squareBox" ng-repeat="app in myArray"> 
      <p>{{app.name}} </p> 
      <!--Some more data here --> 
      This entire div tag needs to be refreshed every 2 minutes 
     </div> 
    </body>

あり、どのような私は3分ごとにdivの内容を自動更新したいと思っています。したがって、jsonファイルが変更されると、myArrayはデータを更新して、ボックスに表示する必要があります。事前に感謝:)

出典

2016-04-28 Parth Bhoiwala

ここjQueryを使用しないソリューションです。 jQueryを使用してDOMを混乱させないようにしてください。それは角度のない方法です。

angular.module('app', []).controller("MainCtrl", ["$scope", "$http","$interval", 
    function($scope, $http, $interval) { 
     //store your data 
     $scope.myArray = []; 

     //store the interval promise in a variable 
     var promise; 

     //stops the interval 
     function stop() { 
       $interval.cancel(promise); 
      } 

     //starts the interval 
     function start() { 
      //stops any running intervals to avoid two intervals running at the same time 
      stop(); 
      //kick off the interval and store it in the promise 
      promise = $interval(refreshItems, 180000); //3 minutes in millisecs = 180000 
     } 

     //this function is used to get your data 
     function refreshItems() { 
      $http.get('MyWebApp/JsonData').then(function(data, 
       status, header, config) { 
       $scope.myArray = data; 
      }, function(data, status, header, config) { 
       //an error occurred 
      }); 
     } 

     //function to kick off when the page renders 
     function init() { 
      start(); 
      //do other things here 
     } 

     //kick off the page when the controller is fully loaded 
     init(); 
    } 
]);

出典

2016-04-28 15:13:48 Kyle

あなたはAJAXリクエストごとに3分を作るためにsetInterval()を使用することができますが：

$(document).ready(function() { 
    setInterval(function(){ updateDiv(); }, 10000); // this example is for each 10 seconds. change as you need 
}); 

function updateDiv(){ 
    getJSONByAJAX(); 
} 

function getJSONByAJAX(){ 
// request ajax 
    $.ajax({ 
     type : 'post', 
     url : 'yourPageThatSendJSON.php', 
     dataType: 'json', 
     success : function(data){ 
      setContentOnDiv(data); 
     } 
    }); 
} 

function setContentOnDiv(data){ 
    $('div.squareBox').html(data); 
}

出典

2016-04-28 14:56:35

Divコンテンツを自動的に更新する

答えて

関連する問題