使用Javascript将文件插入到html页面？

I'm currently trying to read text from a file and append it to a element in my html page using the DOM and Javascript. I can't get the text to format though. I've tried using innerHtml but isn't formating at all( no line breaks ).

我目前正在尝试从文件中读取文本,并使用DOM和Javascript将其附加到我的html页面中的元素。我不能让文本格式化。我尝试过使用innerHtml但根本没有格式化(没有换行符)。

Here is the javascript:

这是javascript:

http = new XMLHttpRequest();
http.open("GET",FILE,false);
http.send();       
document.getElementById("tbody").innerHTML = http.responseText

Like I said the text gets added to the tbody element but isn't formatted what so ever.

就像我说的那样,文本被添加到tbody元素中,但是没有格式化。

I got it working with this code( with the pre tag ), but like I said it works on my pc but not on the server which doesn't help.

我得到了它使用这个代码(与pre标签),但就像我说它在我的电脑上工作,但不在服务器上没有帮助。

           http.open("GET",FILE ,false);
           http.send();
           var newtext = document.createTextNode(http.responseText);
           var para = document.getElementById("tbody");
           para.appendChild(newtext);

Here is all my javascript code:

这是我的所有javascript代码:

function getHTTPObject() { var http = false;

function getHTTPObject(){var http = false;

/*@cc_on
    @if (@_jscript_version >= 5)
    try
    {
        http = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    {
        try
        {
            http = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (E)
        {
            http = false;
        }
    }
    @else
    {
        http = false;
    }
@end @*/

if (!http && typeof XMLHttpRequest != 'undefined')
{
    try
    {
        http = new XMLHttpRequest();
    }
    catch (e)
    {
        http = false;
    }
}
return http

}

    function loadData()
    {

     http = getHTTPObject();

        if (http)
        {
           http.open("GET","my file name",false);
           http.send();
           var newtext = document.createTextNode(http.responseText);
           var para = document.getElementById("tbody");
           para.appendChild(newtext);   
        }
    }

5 个解决方案

#1

You might have luck wrapping the text in a <pre> tag. What's in the response? If it's XML, you might want to use responseXML.

您可以幸运地将文本包装在

标记中。回复中有什么?如果是XML,您可能希望使用responseXML。

http = new XMLHttpRequest();
http.open("GET",FILE,false);
http.send();       
document.getElementById("tbody").appendChild(http.responseXML);

#2

It all depends in what kind of data is in the response. If it is plain text there is no reason it should be formatted. If you'd like the html to "respect" the whitespace, as suggested above, put the text inside a pre tag.

这一切都取决于响应中的数据类型。如果是纯文本,则没有理由将其格式化。如果您希望html“尊重”空白,如上所述,请将文本放在预标记内。

If the response is html make sure that #tbody is a div or something similar.

如果响应是html,请确保#tbody是div或类似的东西。

You should also look into using something like jquery for your DOM manipulation and ajax. It'll save you headaches with cross-browser compatibility and it is nicer to write.

您还应该考虑使用类似jquery的东西来进行DOM操作和ajax。它可以帮助您避免令人头疼的跨浏览器兼容性,并且编写起来更好。

#3

I would bet the answer is related to your statement: "It works on my PC but not on the server". I'm guessing that you are having problems because the file doesn't exist on the server, or the path to the file is different. have you checked that the file is sent to your client by trying the URL for the file in the browser directly?

我敢打赌,答案与你的陈述有关:“它适用于我的电脑而不是服务器”。我猜你遇到了问题,因为服务器上没有该文件,或者该文件的路径不同。您是否通过直接在浏览器中尝试该文件的URL来检查文件是否已发送到您的客户端?

#4

innerHTML takes (and parses) and html string, so what should result is a DOM tree similar to

innerHTML采用(和解析)和html字符串,因此应该得到的结果是类似于的DOM树

(assuming )

<tbody>{responseText}</tbody>

But without knowing what type of content is in the response text it's difficult to know the exact cause of your problem.

但是,如果不知道响应文本中的内容类型,则很难知道问题的确切原因。

#5

The reason it works on your PC but not on the server is probably timing. AJAX is asynchronous, but you're treating it like it's synchronous.

它在你的电脑上工作但不在服务器上工作的原因可能是时机。 AJAX是异步的,但你将它视为同步。

#1