所以我有一个 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 应该具有更新的数据，然后应将其显示在框中。预先感谢:)
最佳答案
这是不使用 jQuery 的解决方案。尽量不要使用 jQuery 来搞乱 DOM；这不是 Angular 方式。
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();
}
]);
关于javascript - 自动刷新div内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36917905/