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数据获取
原文地址:http://www.cnblogs.com/yzhweb/p/7471997.html