Question

这个简单的问题让我今天早上感到慌乱。我在SO上搜索了这个问题的解决方案，但是只找到了将数据加载到HTML或整个页面刷新的解决方案。我正在尝试使用jQuery的$.ajax函数来刷新某些HTML元素。这些元素具有相同的类。我不想用jQuery将新数据加载到这些元素中;这是由Angular处理的。如果我手动刷新页面（根本没有jQuery），新数据就在那里。但是，我想自动刷新页面的这一部分。我不想刷新整个页面。

到目前为止，我有这个：

setInterval('reloadPage()', 10000);

function reloadPage() {

    $.ajax({
        async: true,
        dataType: 'json',
        type: 'GET',
        url: 'http://localhost:8080/app/rest/json',
        error: function(err) {
                console.log(err.statusText);
            },
        success: function() {
                $('.mq').location.reload(true); 
                console.log($('.mq').location);         
            }
    });
}

$('.mq').location.reload(true);未定义。我知道我在两个方面错误地使用reload：

你不能奇怪地使用它('.mq').location ......我觉得这应该是一个功能。
reload(true)强制从服务器重新加载页面，但我不确定服务器在每次重新加载时是否正在服务该页面，它只是在更新......我不知道，我m模糊不清。

我也试过了$('.mq').load(url)，但是只是从URL中插入了所有正在更新的HTML元素的第一个JSON元素。这不是我想要的，因为正确的值是由HTML中的Angular指令控制的（是的，我知道我应该使用控制器代替）。

那么，如何使用jQuery的$.ajax函数一次刷新多个HTML元素？

Answer 1

我有一个我想要的工作版本，这次是在Angular控制器中。感谢 @DanielBeck pointing me in the right direction。

function QueueDepthCtrl($scope, $http, $timeout) {

    $scope.max = 20000;

    $scope.getData = function() {
        $http.get('http://localhost:8080/app/rest/json')
            .success(function(data, status, headers, config) {

                $scope.dynamic = data[0].currentDepth;
                $scope.xsiteStatus = status;
                console.log($scope.xsiteStatus);
            });
    };

    $scope.intervalFunction = function() {
        $timeout(function() {
            $scope.getData();
            $scope.intervalFunction();
        }, 10000)
    };

    $scope.intervalFunction();
}

在getData函数中，$scope.dynamic应设置为JSON文件中所有元素的第一个值。因此，我希望在我的所有HTML元素中看到相同的值。我在后端使用随机数生成器将值添加到JSON数据中。但是，我的控制器嵌入在ng-repeat中，所以我猜它称为每个元素的Java函数，它为每个元素创建了不同的值。我不认为Angular那么强大。我认为它只是消耗了Java吐出的数据（而不是实际上反复调用Java函数）。也许这不是正在发生的事情，但似乎就是这样。所以，我只需要在repeat范围之外添加一个单独的控制器[循环JSON而不是仅调用第一个元素]，我认为应该解决问题。

Answer 2

您希望将值绑定到$scope，这样您就可以更新模型，而不是重新加载页面，以便更新视图。

值得注意的是，因为您使用的是jQuery ajax调用而不是角度$http调用（用于ajax调用的angular＆＃39; s包装器）。您需要额外执行$scope.$apply()以强制范围刷新。使用$http时不需要这样做。

setInterval('reloadPage()', 10000);

function reloadPage() {

    $.ajax({
        async: true,
        dataType: 'json',
        type: 'GET',
        url: 'http://localhost:8080/app/rest/json',
        error: function(err) {
                console.log(err.statusText);
            },
        success: function(result) {
                $scope.someValue = result;
                $scope.apply();  //Needed because you are not using $http     
            }
    });
}

jQuery：刷新同一个类

2 个答案: