Question

我正在搜索加载位于与html和js文件位于同一文件夹中的JSON文件的方法。无论文件是托管在Web服务器上还是分发用于本地脱机使用，该方法都应该有效。

我尝试使用XMLHttpRequest获取文件，但是在离线使用情况下，这似乎仅适用于Firefox。

任何帮助将不胜感激！

Answer 1

没有可靠的跨浏览器方式来编写可以从用户文件系统加载文件的网页 - 即使页面是从那里加载的。

将JSON嵌入JavaScript脚本中。

Answer 2

这里有两个选择。

1）将jSON数据嵌入到js脚本中。

或

2）使用一个小的PHP文件获取文件内容并使用AJAX将其带到js脚本。

Answer 3

加载文件： data.json 位于与html文件相同的路径中，这可能有助于您...

路径

| - index.html

| - data.json（Json文件）

<html>
<head>

    <title>Loading a Json using Jquery</title>

    <style>
        body{
            text-align: center;
            font-family: arial;
        }

        .button{
            margin:20px;
            font-size:16px;
            font-weight: bold;
            padding:5px 10px;
        }
    </style>


</head>
<body>
    <a href="data.json" target="_blank">Open JSON file</a><br />
    <input type="button" value="Get and parse JSON" class="button" />
    <br />
    <span id="results"></span>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>

        //When DOM loaded we attach click event to button
        $(document).ready(function() {

            //after button is clicked we download the data
            $('.button').click(function(){

                //start ajax request
                $.ajax({
                    url: "data.json",
                    //force to handle it as text
                    dataType: "text",
                    success: function(data) {

                        //data downloaded so we call parseJSON function 
                        //and pass downloaded data
                        var json = $.parseJSON(data);
                        //now json variable contains data in json format
                        //let's display a few items
                        $('#results').html('Plugin name: ' + json.name + '<br />Author: ' + json.author.name);
                    }
                });
            });
        });
    </script>

</body>
</html>

如何加载位于同一路径中的JSON文件？

3 个答案: