服务器与运维

当前位置:澳门新莆京娱乐官网 > 服务器与运维 > jQuery中读取json文件示例代码_jquery_脚本之家

jQuery中读取json文件示例代码_jquery_脚本之家

来源:http://www.drgigabytes.com 作者:澳门新莆京娱乐官网 时间:2019-12-28 22:20

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

$.getJSON(url,[data],[callback])

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

[ { "name":"张国立", "sex":"男", "email":"zhangguoli@123.com" }, { "name":"张铁林", "sex":"男", "email":"zhangtieli@123.com" }, { "name":"邓婕", "sex":"女", "email":"zhenjie@123.com" } ] 

2.其次建一个页面用于获取JSON文件里的用户信息数据,并显示

   getJSON获取数据   #divframe{ border:1px solid #999; width:500px; margin:0 auto;} .loadTitle{ background:#CCC; height:30px;}  < script type = "text/javascript" > ${ $.click { $.getJSON("js/userinfo.json", function { var $jsontip = $; var strHtml = "123"; //存储数据的变量 $jsontip.empty(); //清空内容 $.each(data, function { strHtml += "姓名:" + info["name"] + "
"; strHtml += "性别:" + info["sex"] + "
"; strHtml += "邮箱:" + info["email"] + "
"; strHtml += "" }) $jsontip.html; //显示处理后的数据 }) }) })            

这里脚本之家小编继续为大家分享一下,如果想加载后自动加载内容的写法

[{ "img": "//files.jb51.net/image/http.gif", "url":"//www.jb51.net/1" },{ "img": "//files.jb51.net/image/jbzj.gif", "url":"//www.jb51.net/2" },{ "img": "//files.jb51.net/image/tengxunyun.jpg", "url":"//www.jb51.net/3" }]

jQuery中读取json文件示例代码_jquery_脚本之家。通过ajax获取json数据的实现代码

通过ajax获取json数据的实现代码$ { $.ajax({ type: "POST", dataType: "json", url: "da.json", success: function  { var str = "";$.each(result,function{str += "&lt;a href='" + obj["url"] + "' target='_blank'&gt;&lt;img src='" + obj["img"] + "' /&gt;&lt;/a&gt;";}); $; } });});

澳门新莆京娱乐官网 ,通过$.getJSON获取json的代码

通过$.getJSON获取json的代码${ $.getJSON("da.json",function{ var $jsontip = $; var strHtml = "";//&#23384;&#20648;&#25968;&#25454;&#30340;&#21464;&#37327; $jsontip.empty();//&#28165;&#31354;&#20869;&#23481; $.each(data,function{strHtml += "&lt;a href='" + info["url"] + "' target='_blank'&gt;&lt;img src='" + info["img"] + "' /&gt;&lt;/a&gt;";}) $jsontip.html;//&#26174;&#31034;&#22788;&#29702;&#21518;&#30340;&#25968;&#25454; }) }) 

这样效果就出来了如下图所示就说明代码没问题

本文由澳门新莆京娱乐官网发布于服务器与运维,转载请注明出处:jQuery中读取json文件示例代码_jquery_脚本之家

关键词: