1. JSON(JavaScript Object Notation): javaScript对象表示法；

是存储和交换文本信息的语法，比xml更小，更快，更易解析。

2. JSON基本书写格式 ： 名称/值对。 例如： "Student":"Tom"

Json值可以是：

  1. 数字（整数或浮点数）
  2. 字符串（在双引号中）
  3. 逻辑值（true或者false）
  4. 数组（在方括号中）
  5. 对象（在花括号中）
  6. 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文件数据的更多相关文章

  1. jquery ajax 获取 json 文件数据

    [ {"name":"project1"}, {"name":"project2"}, {"name" ...

  2. jQuery调用ajax获取json格式数据

    <body> <div>点击按钮获取音乐列表</div> <input type="button" id="button&quo ...

  3. Ajax获取 Json文件提取数据

    摘自 Ajax获取 Json文件提取数据 1. json文件内容(item.json) [ { "name":"张国立", "sex":&q ...

  4. jQuery中使用Ajax获取JSON格式数据示例代码

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSONM文件中包含了关于“名称”和“值”的信息.有时候我们需要读取JSON格式的数据文件,在jQuery中 ...

  5. qt qml ajax 获取 json 天气数据示例

    依赖ajax.js类库,以下代码很简单的实现了获取天气json数据并展示的任务 [TestAjax.qml] import QtQuick 2.0 import "ajax.js" ...

  6. php获取json文件数据并动态修改网站头部文件meta信息 --基于CI框架

    话不多说了.直接开始吧  (如果有中文.请注意json只认utf-8编码) 首先你需要有一个json文件数据 {        "index": {                ...

  7. jquery 获取json文件数据，显示到jsp页面上， 或者html页面上

    [{"name":"中国工商银行","code":102},{"name":"中国农业银行",&qu ...

  8. .NetCore获取json文件配置内容

    .netcore中的数据配置及内容用了json文件代替了之前framework的xml文件,那么json中的数据该怎么获取呢?下面讲解json文件在.net core中的获取方法. 首先,新建一个.n ...

  9. jQuery获取JSON格式数据方法

    getJSON方法: jQuery.getJSON(url,data,success(data,status,xhr)) $("button").click(function(){ ...

随机推荐

  1. iOS 抖动动画

    -(void)animationWithCell:(WaterLevelCollectionCell *)cell{ // 添加摇晃动画 { CAKeyframeAnimation *frame=[C ...

  2. python的一些总结1

    1.安装环境 window用户下载 python :https://www.python.org/downloads/release/python-2710/ 安装不解释.. 配置环境变量  找到 P ...

  3. ASP.NET MVC 3 入门级常用设置、技巧和报错

    1.ASP.NET MVC 3 如何去除默认验证 这个默认验证是在web.config配置文件中设置的    <add key="ClientValidationEnabled&quo ...

  4. Educational Codeforces Round 1 A. Tricky Sum 暴力

    A. Tricky Sum Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/598/problem ...

  5. IOS 常用第三方库

    名称 特性 效果图 FXBlurView 实时背景模糊效果   FDFullscreenPopGesture 让UINavigationController在屏幕任何位置均可滑动返回 NJKWebVi ...

  6. C++之运算符重载(2)

    上一节主要讲解了C++里运算符重载函数,在看了单目运算符(++)重载的示例后,也许有些朋友会问这样的问题.++自增运算符在C或C++中既可以放在操作数之前,也可以放在操作数之后,但是前置和后置的作用又 ...

  7. [Effective C++ --032]确定你的public继承塑模出is-a

    这一章都在讲述继承的关系.可以举个例子说明: 父类是水果,子类是苹果,苹果是一种(is-a)水果,但是水果不一定就是苹果. is-a并不是唯一存在classes之间的关系.另两个常见的关系是has-a ...

  8. linux的rpm命令

    rpm 执行安装包二进制包(Binary)以及源代码包(Source)两种.二进制包可以直接安装在计算机中,而源代码包将会由 RPM自动编译.安装.源代码包经常以src.rpm作为后缀名. 常用命令组 ...

  9. VC6.0代码移植到VS2008运行时乱码问题解决

    转载:http://blog.sina.com.cn/s/blog_6d0cbb030101a3cs.html 问题描述:     之前用VC6.0写过一个OpenGL的程序,后来需要将其放到VS20 ...

  10. 数据库字段类型中char和Varchar区别

    char和varchar区别 char类型:对英文(ASCII)字符占用1个字节,对一个汉字占用2个字节,char存储定长数据很方便,char字段上的索引效率级高,比如定义char(10),那么不论你 ...