jquery實現JSON數據獲取
阿新 • • 發佈：2017-09-04
字符 原來 oct 無限 url 字符串轉換 方法 logs log
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"}
]
jquery實現JSON數據獲取