Question

我想在我的html页面的div标签中显示我的json文件的数据

这里是我的jquery代码::

$(document).ready(function () {
    $("#driver").click(function (event) {
        $.getJSON('data.json', function (em) {
            $('#stage').html('<p>Name: ' + em.name + '</p>');
            $('#stage').append('<p>Age : ' + em.age + '</p>');
            $('#stage').append('<p> Sex: ' + em.sex + '</p>');
        });
    });
});

我已经拿了一个按钮，它的id是“驱动程序”..每当点击按钮时，它调用data.json文件并取名字，年龄和性别nd放在div标签中，这是id = “显示”

这里是我的data.json文件代码

{
    "em": {
        "name": "Amit",
        "age": 24,
        "sex": "Male"
    }
}

我得到的错误：

名称：未定义

年龄：未定义

性别：未定义

Answer 1

试试这段代码：

<强> Fiddle ：

 $(document).ready(function () {
        $("#driver").click(function (event) {
            $.getJSON('data.json', function (json) {
                $('#stage').html('<p>Name: ' + json.em.name + '</p>');
                $('#stage').append('<p>Age : ' + json.em.age + '</p>');
                $('#stage').append('<p> Sex: ' + json.em.sex + '</p>');
            });
        });
    });

Answer 2

尝试这样的事情

var obj = {
    "em": {
        "name": "Amit",
        "age": 24,
        "sex": "Male"
    }
};
console.log(obj.em.name);
console.log(obj.em.age);
console.log(obj.em.sex);

在你的情况下

     $.getJSON('data.json', function (obj) {
        $('#stage').html('<p>Name: ' + obj.em.name + '</p>');
        $('#stage').append('<p>Age : ' + obj.em.age + '</p>');
        $('#stage').append('<p> Sex: ' + obj.em.sex + '</p>');
    });

调用getJson方法

2 个答案: