通过Jquery中Ajax获取json文件数据
1. JSON(JavaScript Object Notation): javaScript对象表示法;
是存储和交换文本信息的语法,比xml更小,更快,更易解析。
2. JSON基本书写格式 : 名称/值对。 例如: "Student":"Tom"
Json值可以是:
- 数字(整数或浮点数)
- 字符串(在双引号中)
- 逻辑值(true或者false)
- 数组(在方括号中)
- 对象(在花括号中)
- null
例如(对象):{"name":"tom","age":23}
(数组):
1 {
2 "张三":[
3 {"姓":"张"},
4 {"名","三"},
5 {"age",23}
6 ]
7 }
注意: ① 写JSON数组其实和java中String数组形式差不多,值得注意的是,JSON是名称/值对的。
② 其中出现的字符串形式都是用双引号,不能像js中双引号单、引号都能用。
③ 无论数组还是对象,最后一个数值后面都不能有逗号,不然会出现问题。
经过我的在谷歌浏览器控制台测试JSON数据,对于②和③他都不会报什么错误,都能读取出来,但是我通过jquery中ajax获取JSON文件中数据时,会出现错误,具体原因,暂时无法解答。
下面是在谷歌浏览器控制台调试结果(注意都不符合上面的②和③)。
json数据的基本调用就如图中所写的,就是对数组和对象的调用。
3. 通过具体例子对Json文件的获取。
创建一个.json文件。
{ "list":[
{ "name":"c" , "url":"demo2.html"},
{ "name":"list22" , "url":"demo2.html"},
{ "name":"list33" , "url":"demo2.html"},
{ "name":"list44" , "url":"demo2.html"},
{ "name":"list55" , "url":"demo2.html"},
{ "name":"list66" , "url":"demo2.html"}
], "list1":[
{ "name":"我是第二个ul的1" , "url":"demo2.html"},
{ "name":"我是第二个ul的2" , "url":"demo2.html" },
{ "name":"我是第二个ul的3" , "url":"demo2.html" },
{ "name":"我是第二个ul的4" , "url":"demo2.html" },
{ "name":"我是第二个ul的5" , "url":"demo2.html"},
{ "name":"我是第二个ul的6" , "url":"demo2.html"}
] }
在html中写:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script> //引入jquery库
</head>
<body>
<div class="div">
<ul id="nav1" class="nav"> // 用于存放第一个ul数据的,里面的li标签即数据都是js生成的。
<span style="color:red;">this is nav1</span>
</ul>
<ul id="nav2" class="nav"> //存放第二个ul数据
<span style="color:red;">this is nav2</span>
</ul>
</div>
<script type="text/javascript">
$(function() { // 页面加载之后调用
$.ajax({
type: "get", //请求方式为get,也可以是设置为post
url: "listData.json", //所要获取的json文件相对地址,注意不要写错了,我这里放在同一个目录下的
async: true, //是否为异步请求,ture为异步请求,false为同步请求
success: function(d) { //当请求之后调用。传入返回后的数据,以及包含成功代码的字符串
alert(d); //这里会弹出json文件中所有的字符串数据,如图3-1
var d = eval("(" + d + ")"); // 将json字符串数据解析成对象
alert(d) //弹出: 如图3-2
var str = "<span style='color:red;'>this is nav1</span>";
var str1 = "<span style='color:red;'>this is nav2</span>";
var arr1 = d.list1;
var arr2 = d.list;
if (arr1 != null) {
for (var i = 0; i < arr1.length; i++) { //这里面都是创建li并赋值
str = str + "<li><a href='http://www.baidu.com'>" + arr1[i].name + "</a></li>";
}
$("#nav1").html(str);
}
if (arr2 != null) {
for (var j = 0; j < arr2.length; j++) {
str1 += "<li><a href='" + arr2[j].url + "'>" + arr2[j].name + "</a></li>";
}
$("#nav2").html(str1);
}
}
});
});
</script>
</body>
</html>
视图:
图3-1
图3-2
最后的效果如下图:
气质ul列表也可以根据Css其他样式去设置,达到更美观的效果。
通过Jquery中Ajax获取json文件数据的更多相关文章
- jquery ajax 获取 json 文件数据
[ {"name":"project1"}, {"name":"project2"}, {"name" ...
- jQuery调用ajax获取json格式数据
<body> <div>点击按钮获取音乐列表</div> <input type="button" id="button&quo ...
- Ajax获取 Json文件提取数据
摘自 Ajax获取 Json文件提取数据 1. json文件内容(item.json) [ { "name":"张国立", "sex":&q ...
- jQuery中使用Ajax获取JSON格式数据示例代码
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSONM文件中包含了关于“名称”和“值”的信息.有时候我们需要读取JSON格式的数据文件,在jQuery中 ...
- qt qml ajax 获取 json 天气数据示例
依赖ajax.js类库,以下代码很简单的实现了获取天气json数据并展示的任务 [TestAjax.qml] import QtQuick 2.0 import "ajax.js" ...
- php获取json文件数据并动态修改网站头部文件meta信息 --基于CI框架
话不多说了.直接开始吧 (如果有中文.请注意json只认utf-8编码) 首先你需要有一个json文件数据 { "index": { ...
- jquery 获取json文件数据,显示到jsp页面上, 或者html页面上
[{"name":"中国工商银行","code":102},{"name":"中国农业银行",&qu ...
- .NetCore获取json文件配置内容
.netcore中的数据配置及内容用了json文件代替了之前framework的xml文件,那么json中的数据该怎么获取呢?下面讲解json文件在.net core中的获取方法. 首先,新建一个.n ...
- jQuery获取JSON格式数据方法
getJSON方法: jQuery.getJSON(url,data,success(data,status,xhr)) $("button").click(function(){ ...
随机推荐
- codeforce 621A(水题)
A. Wet Shark and Odd and Even time limit per test 2 seconds memory limit per test 256 megabytes inpu ...
- Educational Codeforces Round 7 - E. Ants in Leaves
题目链接:http://www.codeforces.com/contest/622/problem/E 题意是给你一棵树,1为根,每个叶子节点有一个蚂蚁,移动到一个邻接节点时间耗费为1,一个节点上不 ...
- OGNL stack value 值栈(主要参考官方手册)
The framework uses a standard naming context to evaluate OGNL expressions. The top level object deal ...
- 如何使用C#去灰度化一幅图像
灰度化一幅图像就是将图像的色彩信息全部丢掉,将24位的位图信息,用8位来表示,灰度图共有256级灰度等级,也就是将24位位图的一点如(255,255,255)转换成255,所以R,G,B三个值所乘的系 ...
- javascript keycode大全【转载】
keycode 8 = BackSpace BackSpace keycode 9 = Tab Tabkeycode 12 = Clearkeycode 13 = Enterkey ...
- 从hello-world 开始 <contiki学习之四>
按照contiki 官方给出的example下的例子之hello world来说,所有的工程里面都有一个唯一的Makefile.然后这个Makefile会去调用其他makefile文件.于是,一切就从 ...
- c# windowsForm打印
在windows应用程序中文档的打印是一项非常重要的功能,在以前一直是一个非常复杂的工作,Microsoft .net Framework的打 印功能都以组件的方式提供,为程序员提供了很大的方便,但是 ...
- 关于c#调用C++代码的一些应用的体会
1.dll函数的导入: 关键字:unmanaged code ; managed code; 具体应用类:System.Runtime.InteropServices 具体使用方法: ...
- EDIT Ini写Ini配置
EDIT Ini写Ini配置 uses IniFiles; {$R *.dfm} function IniFileName:string; begin Result:=ExtractFil ...
- android UI进阶之实现listview的下拉加载
关于listview的操作五花八门,有下拉刷新,分级显示,分页列表,逐页加载等,以后会陆续和大家分享这些技术,今天讲下下拉加载这个功能的实现. 最初的下拉加载应该是ios上的效果,现在很多应用如新浪微 ...