jQuery：刷新同一类的HTML元素答案

【问题标题】：jQuery: Refresh HTML elements of same classjQuery：刷新同一类的HTML元素
【发布时间】：2015-12-18 11:15:30
【问题描述】：

今天早上，这个简单的问题让我心慌。我已经在 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) 强制从服务器重新加载页面，但我不确定每次重新加载时服务器是否正在提供页面，它只是在更新......我不知道，我对此很模糊。

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

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

【问题讨论】：

您是否将结果绑定到您范围内的值？
@Malkus 我最初将它与ng-init=mq.currentDepth 绑定，其中mq 在父ng-repeat 中定义，currentDepth 是正在使用其值的JSON 键。但似乎ng-init 到目前为止一直在工作，因为来自服务器的数据也在 10 秒计时器上。我只是想在客户端自动同步它。
您正在使用 Angular，停止考虑“刷新页面”并开始考虑“更新数据模型”。当数据发生变化时，Angular 会重绘数据绑定的元素。
@DanielBeck 好的，我可以用ng-model 或ng-bind 之类的简单指令来处理这个问题吗？
...有点像？ ng-model 允许您将数据绑定到表单元素，但这与您似乎在这里提出的问题相切。我想你可能想从stackoverflow.com/questions/14994391/… 开始，然后学习一些 Angular 教程（最好完全不使用 jQuery；这更像是一个障碍而不是 Angular 的帮助。）Angular 需要相当多的时间来适应；它不太适合只是潜入并尝试的方法。

标签： jquery html json ajax angularjs

【解决方案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 而不是仅调用第一个元素 ]，我认为这应该可以解决问题。

【讨论】：

【解决方案2】：

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

值得注意的是，因为您使用的是 jQuery ajax 调用而不是 angular $http 调用（angular 的 ajax 调用包装器）。您需要额外执行$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     
            }
    });
}

【讨论】：