Question

我已经注意到这几次，我开始认为我缺少一些基本的理解。以下是HTML标记（x）的结构，最终输出到div中。我使用getJSON获取特定产品的视频缩略图，并为每个产品动态生成<td>块。但是JSON循环中没有任何内容可以使它成为html。不在JSON循环中的所有内容都会得到输出。我经常注意到JSON循环似乎是一个独立的世界，而不是识别在它之外设置的变量。我显然错过了一些东西。

$(".prodVidUpdateLink").live("click", function(e) {
   $("#dspEditVideo").fadeOut("slow");//css({'display':'none'});
   var listings_clickedId = $(this).attr("id")
   var product_id = listings_clickedId.split("^")[1]
   var user_id = listings_clickedId.split("^")[2]
   var product_image = listings_clickedId.split("^")[3]
   var x = "<span class='listingText'><b>Current Videos:</b></span><br>";
   x += "<input type='hidden' name='entity' id='entity' value='products'>";
   x += "<input type='hidden' name='entity_id' id='entity_id' value='" + product_id + "'>";
   x += "<table border='0' cellspacing='0' cellpadding='3'><tr>";
   x += "<td class='listingText'><img src='/chinabuy-new/images/website/users/products/images/" + user_id + "/" + product_id + "/" + product_image + "' width='58' height='40'></td>";

// None of the markup within the following getJSON block is output in html(x)

   $.getJSON("/chinabuy-new/cfcs/main.cfc?method=getVideos&returnformat=json&queryformat=column", {"user_id":user_id,"entity":"products","entity_id":product_id}, function(res2,code) {
    for(var i=0; i<res2.ROWCOUNT; i++){  
     x += "<td class='listingText'><img class='thumbVid' id='" + res2.DATA.RECORD_ID + "' src='/chinabuy-new/videos/products/" + user_id + "/" + product_id + "/" + res2.DATA.THUMB + "' width='58' height='40'></td>";
    }
   });
   x += "</tr></table>";
   $("#dspEditVideo").fadeIn("slow");
   $("#dspEditVideoInner").html(x);
  })

Answer 1

我经常在这里看到这个错误。问题是你的回调函数：

  function(res2,code) {
    for(var i=0; i<res2.ROWCOUNT; i++){  
     x += "<td class='listingText'><img class='thumbVid' id='" + res2.DATA.RECORD_ID + "' src='/chinabuy-new/videos/products/" + user_id + "/" + product_id + "/" + res2.DATA.THUMB + "' width='58' height='40'></td>";
    }
   }

在你的ajax返回之前，

没有被执行。

但是，下面的代码：

   x += "</tr></table>";
   $("#dspEditVideo").fadeIn("slow");
   $("#dspEditVideoInner").html(x);

一旦ajax请求启动，

将完成运行。这是因为ajax是异步的（* A * jax），并且在从服务器获取数据时不会暂停脚本执行。

您可以通过移动回调函数的所有html生成和设置内容来修复它。

Answer 2

根据Andy的回答，您可以通过将代码更改为：

来解决此问题

$.getJSON("/chinabuy-new/cfcs/main.cfc?method=getVideos&returnformat=json&queryformat=column", {"user_id":user_id,"entity":"products","entity_id":product_id}, function(res2,code) {
    for(var i=0; i<res2.ROWCOUNT; i++){  
        x += "<td class='listingText'><img class='thumbVid' id='" + res2.DATA.RECORD_ID + "' src='/chinabuy-new/videos/products/" + user_id + "/" + product_id + "/" + res2.DATA.THUMB + "' width='58' height='40'></td>";
    }
    x += "</tr></table>";
    $("#dspEditVideo").fadeIn("slow");
    $("#dspEditVideoInner").html(x);
});

这将导致在异步调用完成后添加标记

JSON循环中的标记没有输出到HTML

2 个答案: