自动刷新Div内容

所以我有一个显示几个框的HTML页面。这些盒子有我从json（url文件）加载的数据。 JSon每2分钟更改一次，因此我需要更新数据，但我不想刷新整个页面。我尝试使用Ajax和JQuery，但它太混乱了。有人告诉我，我可以使用AngularJS $ http服务。如果是这样，任何人都可以告诉我一个如何做的例子吗？自动刷新Div内容

这是我到目前为止有：

这是我的 '的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>

这是我的 '的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!"); 
    }); 
}]);

又是什么我想要做的是每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

可以使用setInterval()，使Ajax请求每3分钟：

$(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内容

回答

相关问题