ajax请求JSON数据并解析

2018-01-01 本文已影响33人丶灰太狼他叔

通常，从后台拿到的时JSON字符串。所以用JSON.parse来转为JSON对象，不建议使用eval（）函数，因为eval（）接受任意的字符串，并当作JavaScript代码来处理,这个机制已经有安全隐患了。

ajax是局部刷新页面，所以页面并不会刷新。判断是不是用的ajax来做的可以点击的时候看看页面是否刷新就可以了

用到ajax所以需要一个本地的服务器环境，file协议是不允许的。之前想用node的express来搭建一个本地的服务器，但是总是拿不到json。最后也没有找到原因。所以干脆直接用hbuilder直接打开（webstorm也是可以的），它是内置了本地服务器环境的，简单粗暴。
简单的JSON数据：

[{
        "MVP":"Stephen Curry",
        "position":"Point Guard",
        "number":"30",
        "team":"Golden State Warriors"
    },{
        "FMVP":"Lebron James",
        "position":"Small Forward",
        "number":"23",
        "team":"Cleveland Cavaliers"
    }]

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ajax</title>
    <script  src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
    <style>
        .btn {
            background: blue;
        }
    </style>
</head>
<body>
    <button class="btn1">按钮1</button>
    <button class="btn2">按钮2</button>
    <ul></ul>
</body>
<script type="text/javascript">
    $(function () {
        $('button').click(function () {
            $('button').removeClass('btn');
            $(this).addClass('btn');
        });
        $('.btn1').click(function () {
            $.getJSON('./one.json',function (res) {
                console.log(res);
                //console.log(typeof res);//object
                $.each(res,function (index,item) {
                    console.log(index,item);
                    $('ul').append('<li>' + item.position +'</li>')
                });
            });

        });
        $('.btn2').click(function () {
            $.getJSON('./two.json',function (res) {
                //console.log(typeof res);//object
                $.each(res,function (index,item) {
                    console.log(index,item);
                    $('ul').append('<li>' + item.team +'</li>')
                });
            });

        });
    })
</script>
</html>

each方法遍历数组的时候：第一个参数为这个数组对象，函数的参数分别为下标和对应该下标的对象

这里为了省事所以只是简单的拿到了数据，解析了一个属性放了上去
后台一般返回的为一个JSON字符串，所以要用JSON.parse()转为一个JSON对象。
一般遍历是用each方法来做的，当然用for循环也是可以的。
最后，上个效果图

ajax.png

最后还有一个需要注意的问题就是，JSON的路径时相对于HTML的，而不是这个JS的路径；因为脚本执行时的base路径是你的document路径（既HTML路径），而不是脚本的路径。

ajax请求JSON数据并解析

猜你喜欢

热点阅读