JSON 入门探讨。

原创 2007年09月26日 16:12:00

添加 JSON

在使用名称/值对或 XML 时,实际上是使用 JavaScript 从应用程序中取得数据并将数据转换成另一种数据格式。在这些情况下,JavaScript 在很大程度上作为一种数据操纵语言,用来移动和操纵来自 Web 表单的数据,并将数据转换为一种适合发送给服务器端程序的格式。

但是,有时候 JavaScript 不仅仅作为格式化语言使用。在这些情况下,实际上使用 JavaScript 语言中的对象来表示数据,而不仅是将来自 Web 表单的数据放进请求中。在这些情况下,从 JavaScript 对象中提取数据,然后再将数据放进名称/值对或 XML,就有点儿多此一举 了。这时就合适使用 JSON:JSON 允许轻松地将 JavaScript 对象转换成可以随请求发送的数据(同步或异步都可以)。

JSON 并不是某种魔弹;但是,它对于某些非常特殊的情况是很好的选择。不要认为您不会遇到这些情况。阅读本文和下一篇文章来了解 JSON,这样,遇到这类问题时您就知道该怎么办了。

JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串,然后就可以在函数之间轻松地传递这个字符串,或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序。这个字符串看起来有点儿古怪(稍后会看到几个示例),但是 JavaScript 很容易解释它,而且 JSON 可以表示比名称/值对更复杂的结构。例如,可以表示数组和复杂的对象,而不仅仅是键和值的简单列表。 

如果要处理大量 JavaScript 对象,那么 JSON 几乎肯定是一个好选择,这样就可以轻松地将数据转换为可以在请求中发送给服务器端程序的格式。

 

示例1:JSON数据格式,以及获取其中的数据

JSON数据格式,以及获取其中的数据

<script type="text/javascript">
var people =
  ...
..."programmers": [
    ...
..."firstName""Brett""lastName":"McLaughlin""email""brett@newInstance.com" },
    ...
..."firstName""Jason""lastName":"Hunter""email""jason@servlets.com" },
    ...
..."firstName""Elliotte""lastName":"Harold""email""elharo@macfaq.com" }
   ],
  
"authors": [
    ...
..."firstName""Isaac""lastName""Asimov""genre""science fiction" },
    ...
..."firstName""Tad""lastName""Williams""genre""fantasy" },
    ...
..."firstName""Frank""lastName""Peretti""genre""christian fiction" }
   ],
  
"musicians": [
    ...
..."firstName""Eric""lastName""Clapton""instrument""guitar" },
    ...
..."firstName""Sergei""lastName""Rachmaninoff000""instrument""piano" }
   ]
  }
;
      people.musicians[
1].lastName = "Rachmaninov111"//赋值修改数据
      
      alert(people.authors[
1].genre);            // Value is "fantasy"

    alert(people.musicians[
1].lastName);        

    alert(people.programmers[
2].firstName);    // Value is "Elliotte"
    
    
var com =
 ...
...{comments:[
     ...
...{
          id:
1,
          author:
"someone1",
          url:
"http://someone1.x2design.net",
          content:
"hello"
     }
,
     ...
...{
          id:
2,
          author:
"someone2",
          url:
"http://someone2.x2design.net",
         content:
"hello"
     }
,
     ...
...{
          id:
3,
          author:
"someone3",
          url:
"http://someone3.x2design.net",
          content:
"hello"
     }
],
   authors: [
    ...
..."firstName""Isaac""lastName""Asimov""genre""science fiction" },
    ...
..."firstName""Tad""lastName""Williams""genre""fantasy" },
    ...
..."firstName""Frank""lastName""Peretti""genre""christian fiction" }]
 }
;

     alert(com.comments[
0]. content);
    alert(com.authors[
0]. firstName);
  

</script>

 

示例2:利用jquery     和 JSON获取进行异步数据的传递和显示

示例中传递过来的数据格式为:

[{"name":"备忘录","id":"3"},{"name":"学习java","id":"5"},{"name":"技术研究","id":"2"},{"name":"目前工作","id":"1"},{"name":"记事本","id":"4"}]

 

<%...@ page contentType="text/html;charset=utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    
<head>
        
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
        
<script type="text/javascript" src="jquery.js"></script>
        
<link href="task.css" type="text/css" rel="stylesheet">
        
<title>My JSP 'demoTest.jsp' starting page</title>

<script type="text/javascript">...
//获取任务列表


function getLists() ...{
    $.getJSON(
"taskservice.jsp",                //服务器页面地址
        ...{
            action: 
"getLists"                  //action参数
        }
,
        
function(json) ...{                         //回调函数
            alert(json);
            alert($(
"#lists"));
            $(
"#lists").empty();                //清空现有列表
            $(json).each(function(i) ...{          //遍历结果数组
                //创建任务列表项容器div
                var box = $(document.createElement("div"));
                box.addClass(
"box");
                box.append(
"·");
                
//创建任务列表项span
                var spanNode = $(document.createElement("span"));
                spanNode.id(
"list" + json[i].id);   //设置任务id
                spanNode.addClass("pointer");       //增加class样式
                spanNode.addClass("list");          //增加class样式
                spanNode.click(function()...{          //设置鼠标点击响应函数
                    alert(json[i].id);           //鼠标点击后获取列表内任务
                }
);
                spanNode.html(json[i].name);        
//设置显示的任务列表项名称
                box.append(spanNode);               //将任务列表项追加到容器中
                //在任务列表项容器中继续追加DEL操作span
                $(box).append("<span class='operation pointer' onclick='delList(" + json[i].id + ")'>[ DEL ]</span>");
                
//在任务列表项容器中继续追加EDIT操作span
                $(box).append("<span class='operation pointer' onclick='editList(" + json[i].id + ")'>[ EDIT ]</span>");
                $(
"#lists").append(box);            //将任务列表项容器加入到列表中
            }
);
            
//在列表中追加添加新列表表单
            $("#lists").append("<div><input type='text' id='newListName'></div>");
            $(
"#lists").append("<div><input type='button' value='添加新列表' onclick='addNewList()'></div>");
        }

    );
}


<%
    request.getSession().setAttribute(
"_LOGIN_USER_","1");
%>
</script>


</head>

<body onload="getLists()">

<table id="taskContainer" style="" border="0">
        
<tr>
            
<td valign="top">
                
<!-- 任务列表 -->
                
<div class="title">
                    任务区列表
                    
</div>
                
<div id="lists">
                
</div>
            
</td>
            
<td valign="top">
                
<!-- 任务 -->
                
<div id="currentList" class="title"></div>
                
<div id="tasks">
                
</div>
            
</td>
        
</tr>
    
</table>
</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

Android平台Camera实时滤镜实现方法探讨(七)--滤镜基本制作方法(一)

本篇简单介绍一些滤镜的制作方法
  • oShunz
  • oShunz
  • 2015年12月08日 09:13
  • 5758

手机管理应用研究【1】——总篇

说明 由于自己一直以来对手机管理方面的东西比较感兴趣,加上最近以来老大的驱动,所以决定研究整理一下root相关技术(不局限于root)。手机Root是一门大学问,root的招数各有不同。Root权...
  • zhgxhuaa
  • zhgxhuaa
  • 2014年07月22日 15:33
  • 2470

多级树集合分裂(SPIHT)算法的过程详解与Matlab实现

上星期我们讨论了EZW算法,很高兴收到了一些朋友的email,对算法进行探讨、交流。这也是我开这个博客的源动力之一,学习就应该开诚布公、交流互助,在探讨中加深对所学知识的理解和掌握。在弄懂了EZW算法...
  • qishi2014
  • qishi2014
  • 2015年04月15日 18:18
  • 1146

JSON入门指南

  • 2014年07月16日 17:24
  • 69KB
  • 下载

jquery json java 入门示例

  • 2013年06月26日 22:08
  • 1.44MB
  • 下载

JSON 入门指南--(PDF电子书+随书源码)免费

  • 2009年06月24日 13:14
  • 211KB
  • 下载

Struts2 json插件入门指南.pdf

  • 2012年06月06日 12:30
  • 585KB
  • 下载

Json入门的一个实用案例

  • 2012年11月13日 14:58
  • 1.11MB
  • 下载

json 入门教程

  • 2013年01月30日 18:22
  • 148KB
  • 下载

Gson解析JSON数据的入门级源码

  • 2016年03月19日 13:19
  • 8KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JSON 入门探讨。
举报原因:
原因补充:

(最多只允许输入30个字)