什么是json?
一种简单的数据格式,比xml更轻巧。 JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。
后台java代码处理json所需jar包
jakarta commons-lang 2.4
jakarta commons-beanutils 1.7.0
jakarta commons-collections 3.2
jakarta commons-logging 1.1.1
ezmorph 1.0.6
json-lib-2.4-jdk15.jar
Json的规则
JSON的规则很简单: 对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’对”之间使用“,”(逗号)分隔。
示例:
function testJson1(){ var user = { "name":"dakui", "age":23, "info":{"tel":"langfang","cellphone":"15175666666"}, "address": [ {"city":"langfang","postcode":"065000"}, {"city":"hengshui","postcode":"053000"}, ] } alert(user.name); alert(user.address[0].city); alert(user.address[1].postcode); }
Json传递实体:
后台:
response.setContentType("text/html"); PrintWriter out = response.getWriter(); User u1=new User(); u1.setName("zsk1"); u1.setAge(23); //json返回实体 JSONObject jsonObject=JSONObject.fromObject(u1);//转化Map对象 out.print(jsonObject);//返给ajax请求
前台:
function testJson(){ $.ajax({ type : "POST", url : "/testMVC/test/json", dataType : "json", //返回值类型 success:function(json){ alert(json.name); }, error : function() { alert("网络连接出错!"); } }); }
JSONArray传递List对象:
和传递实体大同小异
只需在后台转换为JSONObject中把原来的实体对象换位List对象即可
PrintWriter out = response.getWriter(); List<User> list = new ArrayList<User>();//传递List Map<String, User> m=new HashMap<String, User>();//传递Map User u1=new User(); u1.setName("zsk1"); u1.setAge(23); User u2=new User(); u2.setName("zsk2"); u2.setAge(56); list.add(u1); //添加User对象 list.add(u2); //添加User对象
前台:
function testJson(){ $.ajax({ type : "POST", url : "/testMVC/test/json", dataType : "json", //返回值类型 success:function(json){ alert(json[0].name+" " json[0].age; }, error : function() { alert("网络连接出错!"); } }); }
JSONObject传递Map对象:
后台代码:
response.setContentType("text/html"); PrintWriter out =response.getWriter(); Map<String, User> m=new HashMap<String, User>();//传递Map User u1=new User(); u1.setName("zsk1"); u1.setAge(23); User u2=new User(); u2.setName("zsk2"); u2.setAge(56); m.put("u1", u1); m.put("u2", u2);
前台代码:
function testJson2(){ $.ajax({ type: "POST", url:"/testMVC/test/json", dateType:"json", success:function(json){ alert(json.u1.username); }, error:function(){ alert("网络连接出错!"); } }); }
在很多项目中都会有在前端展现数据图表的需求,而在开发过程中,开发者往往会使用一些JavaScript库,从而更有效地达到想要的目标。最近,TechSlide上的一篇文章总结了50种用于展现图表的JavaScript库,并对每种库做了简要的说明。这对于想要选择合适JavaScript库的开发者很有参考意义。
如下是详细的参考地址
http://www.infoq.com/cn/news/2013/01/50-javascript-chart-lib
http://techslides.com/50-javascript-charting-and-graphics-libraries/
http://selection.datavisualization.ch/
本文链接
今天有幸发现了一篇外国大神写的文章,详细的介绍了HTML的发展过程,以及HTML5的来源,其中也给我纠正了一个问题--关于DOCTYPYE的真正含义,先把书名发出来,再好好说说这个DOCTYPE的问题,书名《HTML5的设计》。
相信很多人都已经知道了<!DOCTYPE html> 这是HTML5中对于文档类型的规范,DOCTYPE并不是写给浏览器看的(之前我就以为是这样),它是写给验证器看的,如果你在doctype中使用的是xhtml 1.0的规范,在html中又用了html5的标签,那浏览器还是会正常的解析出来,因为浏览器在接收的时候必须开放,它不会检查任何格式类型,只有验证器会。写doctype的最主要的目的就是告诉浏览器 你想使用哪个模式,是标准模式,还是兼容模式。HTML5的这种写法就是告知浏览器该文档使用的标准模式。
关于HTML5的设计,其主要提到的还有HTML5的简洁,比如说声明文档使用utf-8编码,xhtml1.0 就是写 <meta http-equidv="Content-Type" content="text/html ;charse=utf-8" />我还记得毕业那年腾讯面试我的时候让我写过这段,很遗憾,html头部这些东西我都没记过,但如果当时我学过html5的话,我会直接丢出<meta charset="utf-8">这样,搞不好我现在已经坐在腾讯的办公室了。对于css文件的link使用,和js文件的script元素,都做了相应的简化,总结3个词就是避免--不必要的--复杂性(老外总结的)。
HTML5的向前兼容:由于互联网已经发展了比较长的时间,新的标准就必须要兼容之前的页面属性,即使是在html5中弃用的属性,浏览器都需要正常解析出来。曾经不规范的写法,现在也在HTML5中规范了起来,在之前链接元素之内是不允许包含块级元素的(IE是不行的),而现在它变成了一个标准,例如:
<h2><a href='http://www.webgamei.com'>HELLO WORLD</a></h2>
<p><a href='http://www.webgamei.com'>HELLO GIRL</a></p>(以前的标准写法)
现在就变成<a href='http://www.webgamei.com'><h2>HELLO WORLD</h2><p>HELLO GIRL</p></a> 这样就可以只使用一个链接,实习块级元素的同一跳转。当然现在IE还是不支持,但是这变成了一种HTML5标准,以后没人会批评你写的不标准,只会说你这写的不兼容IE。
还有些新的标签我就不一一介绍了,其中对于表单类型的增强,由于IE都不支持,所以还是要慎用,还有HTML5中争议比较大的视频标签,和canvas,总有人拿来和flash视频做比较,说HTML5或取代flash,这些问题都只能静观其变,不能轻易下结论。
今天的文章也就到这了,简单的介绍了下HTML5的设计,希望能勾起大家对HTML5的兴趣
本文链接