通过javascript读取json文件并显示为HTML表格

时间:2014-01-02 08:31:44

标签: javascript html ajax

添加了GET响应标头。请看看你是否有任何线索......感谢你的时间

* 修改了新代码和结果的问题*  我在我的localhost中有一组由mongoose托管的json文件web。我想读取其中一个json文件,解析它并在HTML页面中显示为表格。这个基于HTML的表稍后将被另一个应用程序使用。

请注意,mongoose Web服务器只是托管文件。我不确定它是否支持任何GET / POST请求。

尝试通过Ajax请求读取文件。这是我的代码,下面是控制台输出。请指教。

<html>
    <head>
    <meta charset="UTF-8">
    <title>ajaxtester</title>
    <script type="text/javascript">
        function loadXMLDoc(){  var xhr;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } 
        else {
            xhr=new ActiveXObject("Microsoft.XMLHTTP");
        }

        xhr.onreadystatechange = function() 
        {   console.log("within function");
            if (xhr.readyState==4 && xhr.status==200) {

                console.log("If check passed")
                console.log(xhr.readyState);
                console.log(xhr.status);
                document.getElementById("myDiv").innerHTML=xhr.responseText;
            }
            else
            {   
                console.log("Failed If check")
                console.log(xhr.readyState);
                console.log(xhr.status);
            }
        }
        console.log("After rdystate function")
        console.log(xhr.readyState);

        xhr.open("GET","http://localhost:8080/iso.txt",true);       
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.send();

        console.log("SEND");
        console.log(xhr.readyState);
        console.log(xhr.status);
        console.log(xhr.statusText);
    }
    </script>
    </head>
    <body>
        <div id="myDiv">
        <p>Let AJAX change this text!</p>
        </div>
        <button type="button" onclick="loadXMLDoc()">Change Content</button>
    </body>

在rdystate函数之后 0

在功能范围内 失败如果检查 1 0

GET http://localhost:8080/iso.txt 200 OK 2ms

SEND 1 0 (空字符串)

在功能范围内 失败如果检查 2 0

在功能范围内 失败如果检查 4 0

如您所见,有一个状态代码为200的GET请求,但xhr.status始终返回0。 firebug中的GET响应头也正确显示内容长度。但实际的反应仍然难以捉摸。

GET请求的响应头。注意连接关闭,这是正常的行为吗? 响应标题 Accept-Ranges字节 连接关闭 内容长度5 内容类型文本/普通 日期:星期五,2014年1月3日15:29:41 GMT Etag“52c59fe6.5” Last-Modified Thu,2014年1月2日17:20:38 GMT

1 个答案:

答案 0 :(得分:0)

http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/282972/why-am-i-getting-xmlhttprequest.status0

找到答案

我将脚本浏览器的url更改为localhost:8080 / readfile.html,它就像魔术一样。没有其他变化。