jQuery：加载txt文件并插入div答案

【问题标题】：jQuery: load txt file and insert into divjQuery：加载txt文件并插入div
【发布时间】：2011-06-24 16:04:29
【问题描述】：

我想加载一个 *.txt 文件并将内容插入到一个 div 中。这是我的代码：

js:

$(document).ready(function() {
    $("#lesen").click(function() {
        $.ajax({
            url : "helloworld.txt",
            success : function (data) {
                $(".text").html(data);
            }
        });
    });
});

html:

<div class="button">
    <input type="button" id="lesen" value="Lesen!" />
</div>

<div class="text">
    Lorem Ipsum <br />
</div>

txt:

im done

如果我点击按钮萤火虫报告以下错误：

Syntax-Error
im done

我不知道该怎么办:-(

【问题讨论】：

使用@Dogbert 的答案。暂时忽略错误消息。如果您在 http 服务器上尝试代码，这只是一种“幽灵”错误，它将消失。这是浏览器抱怨您尝试执行的操作是针对 http:// 而不是 file:/// 的方式。

标签： javascript jquery ajax

【解决方案1】：

您需要添加一个数据类型 - http://api.jquery.com/jQuery.ajax/

$(document).ready(function() {
    $("#lesen").click(function() {
        $.ajax({
            url : "helloworld.txt",
            dataType: "text",
            success : function (data) {
                $(".text").html(data);
            }
        });
    });
});

【讨论】：

@Khazl，确切的错误信息是什么。可以在这里复制粘贴吗？
f(a=div.text, c="fxqueue", d=undefined, e=true) f(a=div.text, c="fxqueue", d=function()) f()jquery....min.js (Zeile 16) f(a=[div.text], c=function(), d=undefined) f(a=function(), b=undefined) f(a ="fx", c=function()) f(a=3000, b="fx") 成功(data="im done") f(e=Object { url="helloworld.txt", isLocal=true, mehr...}, f=["im done", "success", Object { readyState=4, responseXML=document, mehr...}]) g(a=200, c="success", l=Object { xml=document, text="im done"}, m="") g(a=readystatechange , e=undefined) im done
我修复了它 :-) 问题是我在没有 apache 的情况下在本地工作......完成了！

【解决方案2】：

你可以使用 jQuery.load(): http://api.jquery.com/load/

像这样：

$(".text").load("helloworld.txt");

【讨论】：

【解决方案3】：

.load("file.txt") 更容易。哪个有效，但即使进行测试，您也不会从本地驱动器获得结果，您需要一个实际的 http 服务器。不可见的错误是XMLHttpRequest 错误。

【讨论】：

【解决方案4】：

您可以使用 jQuery load 方法获取内容并插入到元素中。

试试这个：

$(document).ready(function() {
        $("#lesen").click(function() {
                $(".text").load("helloworld.txt");
    }); 
});

加载过程完成后，您还可以添加回调以执行某些操作

例如：

$(document).ready(function() {
    $("#lesen").click(function() {
        $(".text").load("helloworld.txt", function(){
            alert("Done Loading");
        });
   }); 
});

【讨论】：

【解决方案5】：

试试

$(".text").text(data);

或者将接收到的数据转换成字符串。

【讨论】：

【解决方案6】：

 <script type="text/javascript">     
   $("#textFileID").html("Loading...").load("URL TEXT");
 </script>  

 <div id="textFileID"></div>

【讨论】：