调用getJson方法

时间:2014-01-16 11:27:49

标签: jquery html json

我想在我的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"
    }
}

我得到的错误:

名称:未定义

年龄:未定义

性别:未定义

2 个答案:

答案 0 :(得分: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>');
            });
        });
    });

答案 1 :(得分:0)

尝试这样的事情

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>');
    });