自动刷新 div 内容答案

【问题标题】：Refresh Div Content Automatically自动刷新 div 内容
【发布时间】：2016-04-28 14:37:55
【问题描述】：

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

这是我目前所拥有的：

这是我的'index.html'

    <html ng-app="myApp">

    <head>        
    <title>My data page</title>       
    <script data-require="angular.js@*" 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 应该有更新的数据，然后应该显示在框中。在此先感谢:)

【问题讨论】：

标签： javascript html angularjs json

【解决方案1】：

这是不使用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();
    }
]);

【讨论】：

【解决方案2】：

您可以使用setInterval() 每 3 分钟发出一次 ajax 请求：

$( 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);
}

【讨论】：