当前位置:  编程技术>WEB前端
本页文章导读:
    ▪json简介+实例       什么是json? 一种简单的数据格式,比xml更轻巧。 JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。   后台java代码处理json所需jar包 j.........
    ▪展现图表JavaScript库 Javascript web charts [参考地址]      在很多项目中都会有在前端展现数据图表的需求,而在开发过程中,开发者往往会使用一些JavaScript库,从而更有效地达到想要的目标。最近,TechSlide上的一篇文章总结了50种用于展现图表的Jav.........
    ▪HTML5优秀的设计模式      今天有幸发现了一篇外国大神写的文章,详细的介绍了HTML的发展过程,以及HTML5的来源,其中也给我纠正了一个问题--关于DOCTYPYE的真正含义,先把书名发出来,再好好说说这个DOCTYPE的问题,.........

[1]json简介+实例
    来源: 互联网  发布时间: 2013-11-06

什么是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("网络连接出错!");
  }
 });
 }



作者:xiaokui008 发表于2013-1-31 19:57:22 原文链接
阅读:15 评论:0 查看评论

    
[2]展现图表JavaScript库 Javascript web charts [参考地址]
    来源:    发布时间: 2013-11-06

在很多项目中都会有在前端展现数据图表的需求,而在开发过程中,开发者往往会使用一些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/

本文链接


    
[3]HTML5优秀的设计模式
    来源:    发布时间: 2013-11-06

今天有幸发现了一篇外国大神写的文章,详细的介绍了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的兴趣

本文链接


    
最新技术文章:
▪css white-space:nowrap属性用法(可以强制文字不...
▪IE里button设置border:none属性无效解决方法
▪border:none与border:0使用区别
▪html清除浮动的6种方法示例
▪三个不常见的 HTML5 实用新特性简介
▪css代码优化的12个技巧
▪低版本IE正常运行HTML5+CSS3网站的3种解决方案
▪CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chr...
▪ie6,ie7,ie8完美支持position:fixed的终极解决方案
▪小技巧处理div内容溢出
▪html小技巧之td,div标签里内容不换行
▪纯CSS实现鼠标放上去改变文字内容
▪li中插入img图片间有空隙的解决方案
▪CSS3中Transition属性详解以及示例分享
▪父div高度不能自适应子div高度的解决方案
▪告别AJAX实现无刷新提交表单
▪从零学CSS系列之文本属性
▪HTML 标签
▪CSS3+Js实现响应式导航条
▪CSS3实例分享之多重背景的实现(Multiple background...
▪用css截取字符的几种方法详解(css排版隐藏溢...
▪页面遮罩层,并且阻止页面body滚动。bootstrap...
▪CSS可以做的几个令你叹为观止的实例分享
▪详细分析css float 属性以及position:absolute 的区...
▪IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解...
▪CSS小例子(只显示下划线的文本框,像文字一...
▪可以给img元素设置背景图
▪不通过JavaScript实现的自动滚动视差效果
▪div+CSS 兼容小摘
▪CSS的inherit与auto使用分析
 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2021,,E-mail:www_#163.com(请将#改为@)

浙ICP备11055608号-3