jquery实现JSON数据获取

 

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取JSON</title>
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
</head>
<body>
    <div class="myDiv" style="color:aliceblue"></div>
    <button class="btn">获取数据</button>
    <script type="text/javascript">
    $(function(){
        $(".btn").click(function(){
            $(".myDiv").empty();//每次点击按钮清空原来数据，防止无限加载。
            $.ajax({
                url:"data.txt",
                datatype:"json",
                type:"GET",
                 success:function(data){ 
                    $.each($.parseJSON(data),function(n,item){  //.parseJSON（）方法把JSON字符串转换为javascript对象，不转换的话将会抛出错误。
                        $(".myDiv").append("<p>key:"+item.optionKey+"</br>value:"+item.optionValue+"</p>");//控制输出的数据格式
                    })
                }
            })
        })
    })
    </script>
</body>
</html>

 

json部分：

[ 
{"optionKey":"1", "optionValue":"Canon in D"}, 
{"optionKey":"2", "optionValue":"Wind Song"}, 
{"optionKey":"3", "optionValue":"Wings"} 
]

 

posted @ 2017-09-04 01:21  Cooper_Yao  阅读(8282)  评论(0)  编辑  收藏  举报