zoukankan html css js c++ java

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"} 
]

查看全文

相关阅读:
软件测试常见概念
 Apollo简介及工作原理
 bug的编写技巧与级别划分
 native与H5优缺点及H5测试
 优惠券测试
 go语言-for循环
 go语言-流程控制--if
go语言-二进制与位运算
 cookie和session
AJAX

原文地址：https://www.cnblogs.com/yzhweb/p/7471997.html