Question

我正在寻找一种方法来使下面的代码变得通用。我的目标是用一个脚本在一个页面上更新多个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>

Answer 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>

这是一个example of this in a jsfiddle（显然不是使用AJAX，但它是原理的工作演示）。

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

我也不知道你为何会在show上反复呼叫#content，但我一个人离开了。我假设你知道你在做什么，并会采取相应的行动。由于您在新的WIP解决方案上显示的细节很少，我只是根据您的要求进行了调整。希望它能告诉你去哪里，我不能保证它会像你给出的细节一样有效。

使用一个jquery更新一个页面中的多个div

1 个答案: