jqery ajax读取json文件

json文件数据

[
  {"name":"哈哈··","email":"邮箱01","gender":"男","hobby":["上网","打球"]},
  {"name":"呵呵··","email":"邮箱02","gender":"男","hobby":["网购","打球"]}
]

读取json文件并显示到元素中

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../lib/jquery/jquery.min.js"></script>
</head>
<body>
    <div id="reslut"></div>
<script>
    $(document).ready(function(){
        $.ajax({
            /*请求方式*/
            type:"GET",
            /*json文件位置*/
            url:"user.js",
            /*返回数据格式为json*/
            dataType:"json",
            /*请求成功完成后要执行的方法*/
            success: function (data) {
              /*使用$.each方法遍历返回的数据data,*/
                $.each(data, function (index,obj) {
                    var content = obj.name +","+obj.email+","+obj.gender+","+obj.hobby[0]+","+obj.hobby[1]+"<br/>";
                    /*插入到类名为reslut的元素中*/
                    $("#reslut").append(content);
                });
            }
        })
    });
</script>
</body>
</html>

 

posted on 2016-07-21 01:11  LCFLY  阅读(381)  评论(0)  编辑  收藏  举报

导航