Question

所以我有一个显示几个框的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应该有更新的数据，然后应该在框中显示。在此先感谢：）

Answer 1

您可以使用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);
}

Answer 2

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

自动刷新Div内容

2 个答案: