jQuery中读取json文件示例代码

json文件是一种轻量级的数据交互格式。一般在jquery中使用getJSON()方法读取。

$.getJSON(网址，[数据]、[回调])

url:加载的页面地址数据：可选项，发送到服务器的数据，格式是键/值回调：可选项，加载成功后执行的回调函数1.首先建一个JSON格式的文件userinfo.json保存用户信息。如下：

[ { 'name': '张国立，'性':'男，' email':'[emailprotected]' }，{ 'name': '张铁林，'性':'男，' email':'[emailprotected]' }，{ 'name': '邓婕，'性':'女，' email ' : '[email protected]' }]2 .其次建一个页面用于获取JSON文件里的用户信息数据，并显示

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/titlegetJSON获取数据/title脚本类型=' text/JAVAScript ' src=' http : js/jquery-1。8 .2 .量滴js /脚本样式类型=' text/CSS ' # div frame {边框：1 px实线# 999；宽度宽度：500pxmargin:0 auto}。loadTitle { background: # CCC高度：30 px}/style script type=' text/JavaScript ' $(function(){ $(' # BTN ').单击(函数(){ $).getJSON('js/userinfo.json '，函数（数据){ var $ JSontip=$(' # JSontip ')；var strHtml=' 123//存储数据的变量$ jsontip。empty()；//清空内容$.每个（数据，函数(infoIndex，info){ strHtml='姓名：' info[' name ']' br '；'' strHtml='性别：' info[' sex ']' br '；' strHtml='邮箱：' info[' email ']' br '；strHtml=' HR ' })$ jsontip。html(STRHtml)；//显示处理后的数据})})}))/脚本/头体div id=' div frame ' div class=' LoadTitle '输入类型='按钮'值='获取数据id=' BTN '/div div id=' JSontip '/div/div/body/html这里我们小编继续为大家分享一下，如果想加载后自动加载内容的写法（图片与超链接)

da.json

[{ ' img ' : '//文件。JB 51。net/image/http。gif '，' url':'//www.jb51.net/1' }，{ ' img ' : '//文件。JB 51。net/image/jbzj。gif '，' url':'//www.jb51.net/2' }，{ ' img ' : '//文件。JB 51。网络/文件通过创建交互式、快速动态网页应用的网页开发技术获取json数据的实现代码

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title通过创建交互式、快速动态网页应用的网页开发技术获取json数据的实现代码/title脚本类型=' text/JavaScript ' src=' http://www。JB 51。net/jslib/jquery/jquery。量滴js '/script/headdydiv id=' ok '/div script $(function(){ $).ajax({ type: 'POST '，dataType: 'json '，url: 'da.json '，success : function(result){ var str=' '；$.每个（结果、函数（索引、obj){ str=' a href=' obj[' URL ']' target=' _ blank ' img src=' obj[' img ']' '//a '；});$('#ok ').追加（字符串);} });});/脚本/正文/html通过$.getJSON获取json的代码

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title通过$.getJSON获取json的代码/title脚本类型=' text/JavaScript ' src=' http://www。JB 51。net/jslib/jquery/jquery。量滴js '/script/headdydiv id=' ok '/div script $(function(){ $).getJSON('da.json '，函数（数据){ var $ jsontip=$(' # ok ')；var strHtml=//存储数据的变量$ jsontip。empty()；//清空内容$.每个（数据，函数(infoIndex，info){ StRHtml=' a href=' info[' URL ']' target=' _ blank ' img src=' info[' img ']'//a '；})$ jsontip。html(STRHtml)；//显示处理后的数据})})/脚本/正文/html这样效果就出来了如下图所示就说明代码没问题