jquery使用Ajax调用json数据简单例子。

html内容

<body>
        <div>点击加载json中的数据</div> 
        <input type="button" id="button" value="确定" />
        <div id="result"></div>
<body>

jquery内容

<script src="jquery.js"></script>  //加载jquery文件
<script type="text/javascript">
    $(document).ready(function(){
        $('#button').click(function(){
            $.ajax({
                type:"GET", //方式
                url:"show.json",  //路径
                dataType:"json",
                success:function(data){ //成功后执行的函数
                var show=null;
                $.each(data,function(i,n){   //each遍历json对象,i为key，n为value
                    show+="<div>"+n["Value"]+"</div>"; //获取属性为Value的值
                });
                    $('#result').append(show); //追加到div中
                }
            });
            return false;
        });
    });
</script>

json文件内容

[ 
    {"Key":"1", "Value":"java"}, 
    {"Key":"2", "Value":"jsp"}, 
    {"Key":"3", "Value":"php"},
    {"Key":"4", "Value":"asp"} 
]

执行图：
这里写图片描述

这里写图片描述

这里只是简单的获取json文件中的数据。

版权声明：本文为qq_40678503原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。