jsonæ件æ¯ä¸ç§è½»é级çæ°æ®äº¤äºæ ¼å¼ãä¸è¬å¨jqueryä¸ä½¿ç¨getJSON()æ¹æ³è¯»åã
$.getJSON(url,[data],[callback])
urlï¼å è½½ç页é¢å°å
data: å¯é项ï¼åéå°æå¡å¨çæ°æ®ï¼æ ¼å¼æ¯key/value
callback:å¯é项ï¼å è½½æååæ§è¡çåè°å½æ°
1.é¦å
建ä¸ä¸ªJSONæ ¼å¼çæ件userinfo.json ä¿åç¨æ·ä¿¡æ¯ãå¦ä¸:
?
1234567891011121314151617
[{"name":"å¼ å½ç«","sex":"ç·","email":"
[email protected]"},{"name":"å¼ éæ","sex":"ç·","email":"
[email protected]"},{"name":"éå©","sex":"女","email":"
[email protected]"}]
2.å
¶æ¬¡å»ºä¸ä¸ªé¡µé¢ç¨äºè·åJSONæ件éçç¨æ·ä¿¡æ¯æ°æ®ï¼å¹¶æ¾ç¤º
?
123456789101112131415161718192021222324252627282930313233343536373839404142
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="
http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>getJSONè·åæ°æ®</title><script type="text/javascript" src="js/jquery-1.8.2.min.js"></script><style type="text/css">#divframe{ border:1px solid #999; width:500px; margin:0 auto;}.loadTitle{ background:#CCC; height:30px;}</style>< script type = "text/javascript" >$(function (){ $("#btn").click(function () { $.getJSON("js/userinfo.json", function (data){ var $jsontip = $("#jsonTip"); var strHtml = "123"; //åå¨æ°æ®çåé $jsontip.empty(); //æ¸
空å
容 $.each(data, function (infoIndex, info){ strHtml += "å§åï¼" + info["name"] + "<br>"; strHtml += "æ§å«ï¼" + info["sex"] + "<br>"; strHtml += "é®ç®±ï¼" + info["email"] + "<br>"; strHtml += "<hr>" }) $jsontip.html(strHtml); //æ¾ç¤ºå¤çåçæ°æ® }) })})</script></head><body><div id="divframe"><div class="loadTitle"><input type="button" value="è·åæ°æ®" id="btn"/></div><div id="jsonTip"></div></div></body></html>