Question

我有一个巨大的html文件aprox 200MB（mycartoonlist.html），我应该通过AJAX抓取并将其附加到特定的ID中。这是我的ajax：

    $(document).ready(function() {           
       $.ajax({
            url: "mycartoonlist.html",
            type: "GET",
            dataType: "html",
            success: function(data, textStatus, jqXHR)
            {
                $("#cartoonlisting").html(data);

                console.log(data);
                console.log(jqXHR);
            },
            error: function (jqXHR, textStatus, errorThrown)
            {
                alert(textStatus)
            }
        });

 });

上面的Ajax生成了数以千计的列表，如下所示：

<div id="1" class="list">Cartoon abc</div>
<div id="2" class="list">Cartoon mnk</div>
<div id="3" class="list">Cartoon klo</div>
......................
<div id="10000988" class="list">Carton zzz</div>

将注入：

<div id="cartoonlisting"></div>

我知道我无法将所有这些列表注入我的#cartoonlisting会导致浏览器崩溃，因此我只想将第一个十分之一注入#cartoonlisting

任何建议或意见将不胜感激。

Oouch和我无法通过服务器端脚本将mycartoonlist.html拆分为

我的解决方案：

我使用.load（）Ajax方法，而不是使用基本的.ajax，如下所示：

$(document).ready(function(){
   $("#cartoonlisting").load("mycartoonlist.html #1,#2,#4,#5,#6,#7,#8,#9,#10")
});

以上简短的代码只是我如何注入html并从数千个中选择一些元素的想法。在我的情况下

Answer 1

您可以尝试在请求中添加Range标题，但它不会像指定行数一样冗长。您必须知道每条线路的长度，这对于动态内容来说可能很难。您可以获取文件大小，然后以字节为单位返回文件大小的十分之一。然后，在解析并附加到DOM之前，您需要清理任何无效的标记。

    $(document).ready(function() {           
       $.ajax({
            url: "mycartoonlist.html",
            type: "GET",
            dataType: "html",
            headers: { "Range": "bytes=0-1000" },
            success: function(data, textStatus, jqXHR)
            {
                // clean up data before inserting into DOM
                $("#cartoonlisting").append($(data));

                console.log(data);
                console.log(jqXHR);
            },
            error: function (jqXHR, textStatus, errorThrown)
            {
                alert(textStatus)
            }
        });
 });

Answer 2

您可以收集来自mycartoonlist.html的所有信息一个json对象，然后使用foreach循环迭代json对象并且只将第十个索引数据显示给div id “的 cartoonlisting ”

Answer 3

令我惊讶的是200MB并没有让您的浏览器崩溃，但无论如何这里都是可能的解决方案：

$(document).ready(function() {
   // Where do we start and how far do we go?
   var start = 20000;
   var go = 10;

   $.ajax({
        url: "mycartoonlist.html",
        type: "GET",
        dataType: "html",
        success: function(data, textStatus, jqXHR)
        {
            // clear! bzzt
            $("#cartoonlisting").html('');

            // Loop through the DIVs and see if their index is in your range
            $(data).find('div.list').each(function(){
                if($(this).index() >= start && $(this).index() <= (start + go)){
                    $("#cartoonlisting").append($(this).clone());
                }
            });

            console.log(data);
            console.log(jqXHR);
        },
        error: function (jqXHR, textStatus, errorThrown)
        {
            alert(textStatus)
        }
    });

});

抓住第一个第十个Ajax返回列表

3 个答案: