Question

所以我试图让一系列json结果使用innerHTML在div标签中呈现。

   <script>
    $(document).ready(function() {
        var html2 = '';
        var thread_id = '';
        var created_thread_ids = new Array(123123, 12312312, 1231222);
        for (var i in created_thread_ids)
        {
            thread_id = created_thread_ids[i];
            $.getJSON(ravenUrl + '/docs/threads/' + thread_id, function(thread){
                html2 += '<div class="result">' + thread.Title + thread_id + '</div>';
                document.getElementById("showit").innerHTML = html2;
            });
        }
    });
    </script>

    <div id="showit"></div>

我的问题是变量thread.Title工作正常，但变量thread_id仅在第一次进入url并找到正确的url时工作，但第二次在每个线程后显示相同的id。像这样：

<div id="showit">
<div class="result">This is the first title123123</div>
<div class="result">This is the second title123123</div>
<div class="result">This is the third title123123</div>
</div>

Answer 1

传递给$.getJSON方法的回调函数是一个闭包，并且由于该方法是异步的，因此在执行时将使用thread_id的值。这是常见的问题，并且有几种解决方法，最常见的是使用包装函数：

for (var i in created_thread_ids)
  (function(i){
  ...
  var thread_id = created_thread_ids[i];
  $.getJSON(ravenUrl + '/docs/threads/' + thread_id, function(thread){
    html2 += '<div class="result">' + thread.Title + thread_id + '</div>';
    document.getElementById("showit").innerHTML = html2;
  });
  ...
  }(i));
}

......或者只是......

for (var i in created_thread_ids) {
  var thread_id = created_thread_ids[i];
  $.getJSON(ravenUrl + '/docs/threads/' + thread_id, 
     ( function(thread_id) {
           return function(thread) {
               html2 += '<div class="result">' + thread.Title + thread_id + '</div>';
               document.getElementById("showit").innerHTML = html2;
           };
     }(thread_id) ) 
  );
}

作为旁注，我强烈建议用(for..in)构造替换方便的for(;;)用于遍历数组（或者，考虑使用$.each有用jQuery方法）。

Answer 2

您的created_thread_ids是一个字符串，它应该是一个数组。

变化

var created_thread_ids = '123123, 12312312, 1231222';

到

var created_thread_ids = new Array(123123, 12312312, 1231222);

Answer 3

首先，正如Muth所说，你应该使用数组而不是字符串

var createdThreadIds = [123123, 12312312, 1231222]

其次，您的代码是异步的，并且您不知道如何从您的ajax调用回调，并且它们可能会混淆。

第三，我建议您使用ajax调用返回的Deffered对象，并仅在执行所有调用时更新DOM。

带有innerHTML问题的for循环中的基本getJSON

3 个答案: