0

我正在寻找一种使下面的代码通用的方法。我的目标是用一个脚本在一个页面上更新多个 div（因为我将有大约 100 个）。使用下面的结构，每个 DIV 必须有一个脚本。我来自 webservice_getall.asp 的返回字符串可以根据解析的参数返回值（它们看起来像这样：K2、C16、B2 等任何帮助表示赞赏。

我当前的代码如下所示：

<body>



<div id='content1'>Loading...</div> 
<div id='content2'>Loading...</div> 
<div id='content3'>Loading...</div> 
<div id='content4'>Loading...</div> 
 ......
<div id='contentN'>Loading...</div> 
</body>


</html>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script>
(function($)
{
    $(document).ready(function()
    {
        $.ajaxSetup(
        {
            cache: false,
            beforeSend: function() {
                $('#content').show();

            },
            complete: function() {

                $('#content').show();
            },
            success: function() {

                $('#content').show();
            }
        });


        var $container = $("#content");
        $container.load("webservice_getall.asp?request=contentN");
        var refreshId = setInterval(function()
        {
            $container.load('webservice_getall.asp?request=contentN');
        }, 1000);
    });
})(jQuery);
</script>
4

1 回答 1

1
现在，有了我拥有的“内容”，我只从字符串中的一个值上得到了完整的字符串。

在这种情况下，这将在一定程度上取决于您的退货格式。我将假设您只是返回一个以逗号分隔的文本字符串。如果您收到 JSON 返回或其他任何内容，则需要对其进行修改以适应。

首先，您需要将返回值转换为数组。使用javascript的string.split方法很容易。
注意：您没有很好地描述您的内容。此方法假定您的示例内容具有代表性，并且其中永远不会有包含逗号的内容块：也就是说，逗号只会用于分隔内容元素。就个人而言，我通常会对所有内容进行 json 编码并使用它，但这就是我。

一旦你有了一个数组，你可以使用适当的选择器和.each()方法来遍历你的 div 并将数组中的相应字段放入每个 div。

注意：我选择了一种天真的方法，假设您将始终从id=content1页面开始......或者如果您不这样做，您将始终在数组中返回适当的起始值，无论您的起始内容是什么（因为在调用您的服务器时包含我们的起始索引 no 是微不足道的，然后从该起始点返回正确数量的元素）。

此时，您的代码将如下所示：

TODO替换为您用来一次调用所有内容的任何查询字符串。您还没有说得很清楚，因为您问题中的示例显然是您的旧代码。"webservice_getall.asp?request=allcontent"get

<body>

<div id='content1'>Loading...</div> 
<div id='content2'>Loading...</div> 
<div id='content3'>Loading...</div> 
<div id='content4'>Loading...</div> 
 ......
<div id='contentN'>Loading...</div> 
</body>

<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script>
(function($) {
  $(document).ready(function() {
    $.ajaxSetup( {
      cache: false,
      beforeSend: function() {
        $('#content').show();
      }, 
      complete: function() {
        $('#content').show();
      }, 
      success: function() {
        $('#content').show();
      }
    });
    $.get("webservice_getall.asp?request=allcontent", function(contentReturn){
      contentReturn = contentReturn.split(',');

      $('div[id^="content"]').each(function (index) {
        $(this).html(contentReturn[index]);
      });
    });
    var refreshId = setInterval(function() {
      $.get("webservice_getall.asp?request=allcontent", function(contentReturn) {
        contentReturn = contentReturn.split(',');

        $('div[id^="content"]').each(function (index) {
          $(this).html(contentReturn[index]);
        });
      });
      },
      1000);
  });
})(jQuery);
</script>
</html>

这是 jsfiddle 中的一个示例（显然不使用 AJAX，但它是该原理的工作演示）。

因为这种方式只使用单个选择器迭代每个 div 元素一次，所以它应该是相当不错的性能（例如，与迭代数组并为每个数组元素使用一个新的选择器来处理每个 div 不同——而不是没有'如果你想迭代数组而不是更好的方法，就像不做什么的例子一样）。需要注意的是，我不知道它将如何在真正的大页面上执行，尤其是整个页面取决于单个 AJAX 调用。

我也不知道你为什么反复打电话show，#content但我没有理会它。我假设你知道你在用它做什么，并会采取相应的行动。由于您在新的 WIP 解决方案上展示的细节很少，我只是调整了您提供的内容。希望它能告诉你去哪里，我不能保证它会像你提供的细节一样工作。

于 2013-01-10T03:49:54.920 回答