我需要解析一个JSON文件，并在我的网页本地显示其数据

I need to Parse a JSON file and show its data on my web page locally

本文关键字：我的 网页 数据 显示 文件 JSON 一个      更新时间：2023-09-26

我试图获取我的JSON文件使用ajax请求和它不加载，所有我想要的是显示一些特定的数据包含在JSON文件通过使用一些变量将包含解析的数据，它的输出将显示在浏览器的网页上。但是当我运行时，它只显示了我创建的html元素，在调试器中，我知道点击函数后的代码没有执行它。我使用的代码如下:

  <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Reading Json Data from Json File</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="scripts/jquery.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 () {
                debugger;
                //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>
    <style>
         .button{
            margin:20px;
            font-size:16px;
            font-weight: bold;
            padding:5px 10px;
        }
    </style>
</head>
<body>
<a href="Json file/data.json" target="_blank">Open Json File</a><br />
    <input type="button" value="Get and Parse JSON" class="button" /><br />
    <span id="results"></span>
</body>
</html>
Besides My JSON file named"Data" contains:
    {
    "name": "select2",
    "title": "Select2",
    "description": "Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.",
    "keywords": [
        "select",
        "autocomplete",
        "typeahead",
        "dropdown",
        "multiselect",
        "tag",
        "tagging"
    ],
    "version": "3.4.2",
    "author": {
        "name": "Igor Vaynberg",
        "url": "https://github.com/ivaynberg"
    },
    "licenses": [
        {
            "type": "Apache",
            "url": "http://www.apache.org/licenses/LICENSE-2.0"
        },
        {
            "type": "GPL v2",
            "url": "http://www.gnu.org/licenses/gpl-2.0.html"
        }
    ],
    "bugs": "https://github.com/ivaynberg/select2/issues",
    "homepage": "http://ivaynberg.github.com/select2",
    "docs": "http://ivaynberg.github.com/select2/",
    "download": "https://github.com/ivaynberg/select2/tags",
    "dependencies": {
        "jquery": ">=1.7.1"
    }
}

，我已经将这个文件加载到项目资源管理器的文件夹中。

$.parseJSON(data)可以返回一个数组

json[0].name
然后

$('#results').html('Plugin name: ' +  json[0].name +
                       '<br />Author: ' +  json[0].author.name);

以上代码不能在chrome中工作，因为它不允许跨域请求。为了避免这种情况，您可以在web服务器内运行代码。没有web服务器的Ajax URL请求将无法在chrome中工作。用firefox检查一下是否可以工作。所以最好在web服务器内运行你的应用程序(html+data)。请检查下面的代码

//When DOM loaded we attach click event to button
        $(document).ready(function () {
            //after button is clicked we download the data
            $('.button').click(function () {
                debugger;
                //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);
                    }
                });
            });
        });
.button{
            margin:20px;
            font-size:16px;
            font-weight: bold;
            padding:5px 10px;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Reading Json Data from Json File</title>
</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>
</body>
</html>

相关文章：