jQuery：加载文本文件并插入到div中

Question

我想要加载一个*.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

如果我点击Firebug按钮，会报以下错误：

Syntax-Error
im done

我不知道该怎么办：-(

- Khazl

---

使用@Dogbert的答案。暂时忽略错误消息。这只是一种“幽灵”错误，如果您在http服务器上尝试代码，则会消失。这是浏览器抱怨您正在尝试的内容应该用于http：//而不是file：///。 - Cannicide

Answer 1

你需要添加一个dataType - http://api.jquery.com/jQuery.ajax/

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

- Dogbert

---

@Khazl，请问精确的错误信息是什么？能否复制并粘贴在这里？ - Dogbert

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") success(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 - Khazl

我修好了 :-) 问题是我在本地工作时没有使用Apache... 完成了！ - Khazl

Answer 2

你可以使用jQuery.load()函数： http://api.jquery.com/load/ 像这样：

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

- jncraton

Answer 3

.load("file.txt") 的方式非常简单。虽然它可以工作，但即使在测试时，您也无法从本地驱动器获取结果，您需要一个真正的http服务器。因为出现了不可见的错误，这导致了XMLHttpRequest 错误。

- andersna75

Answer 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");
        });
   }); 
}); 

- Chandu

Answer 5

尝试

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

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

- Jose Faeti

Answer 6

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

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

- Elon Gomes Vieira