jquery實現JSON數據獲取

本文轉載自查看原文 2017-09-04 01:21 2953 ajax

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 json數據獲取(Ajax)並展示 node.js + express 實現 json 文件數據獲取與更新 java 后台實現ajax post跨域請求傳遞json格式數據獲取json數據問題 Js解析Json數據獲取元素JsonPath與深度商圈數據獲取數據獲取 Java實現分頁數據獲取CachedRowSet Restful風格數據獲取 js ajax 數據獲取雅虎等金融數據獲取