客户端jQuery操作json

来源:互联网 发布:单机版销售软件 编辑:程序博客网 时间:2024/04/29 09:24

经常性的会模糊json格式的指定,时间一长很容易忘记,而且在客户端编程当中也非常容易出现错误,并且很难找出其中错在何处。这一切都归结于对json格式的定义不是十分清楚,今天很幸运看到了http://www.ruanyifeng.com/blog/2009/05/data_types_and_json.html这篇文章,其中对于json格式的定义非常清楚。

摘了下面一段:

Json的规格非常简单,只用一个页面几百个字就能说清楚,而且Douglas Crockford声称这个规格永远不必升级,因为该规定的都规定了。

 1) 并列的数据之间用逗号(",")分隔。

 2) 映射用冒号(":")表示。

 3) 并列数据的集合(数组)用方括号("[]")表示。

 4) 映射的集合(对象)用大括号("{}")表示

例如1:

var data="{root:[{'name':1,value:'0'}, {name:'6101',value:'北京'}, {name:'6102',value:'天津市'}, {name:'6103',value:'上海市'}, {name:'6104',value:'重庆市'}, {name:'6105',value:'渭南市'}, {name:'6106',value:'延安市'}, {name:'6107',value:'汉中市'}, {name:'6108',value:'榆林市'}, {name:'6109',value:'安康市'}, {name:'6110',value:'商洛市'}]}"; 
例如2:

var data1="[{name:1,value:2},{name:3,value:'中文'}]";

客户端代码:

<script type="text/javascript"> $(function(){ //key:value  //key:可以加单引号或者双引号 value:如果是数字则不需要要加单引号或双引号,但是字母或者中文必须加单引号或者双引号 //ps:data外头的双引号必须追加  //json对象获取方式1   //键值集合通过{}进行封装 var data="{root:[{'name':1,value:'0'}, {name:'6101',value:'北京'}, {name:'6102',value:'天津市'}, {name:'6103',value:'上海市'}, {name:'6104',value:'重庆市'}, {name:'6105',value:'渭南市'}, {name:'6106',value:'延安市'}, {name:'6107',value:'汉中市'}, {name:'6108',value:'榆林市'}, {name:'6109',value:'安康市'}, {name:'6110',value:'商洛市'}]}";  var obj=eval("("+data+")"); alert(obj.root[0].name); //并列数据的集合(数组)用方括号("[]")表示。 var data1="[{name:1,value:2},{name:3,value:'中文'}]"; var obj1=eval("("+data1+")"); alert(obj1[1].value);  //json对象获取方式2-从服务直接获取json对象,不需要进行eval转换 $.getJSON("json",{"type":1},function(data){ alert("type:1->"+data["name"]); });  $.getJSON("json",{"type":2},function(data){ alert("type:2->"+data[0].name); });  //json对象获取方式3 //插件使用必须格式化如下格式的json字符串,他比原生的json格式要求更严格,因此往往我们会使用插件的toJSON方法 var thing = '[{ "plugin": "jquery-json", "version": 2.4 }]'; var obj2=$.evalJSON(thing); alert(obj2[0].plugin);  //如何将object, number, string, or array into JSON //下面是关联数组->JSON var arr={"key1":2,"key2":3};//alert(arr["key1"]); var arrjson=$.toJSON(arr); var obj3=$.evalJSON(arrjson);  alert(obj3.key1); //alert(data.root[0].name); }) </script>

ps:使用eval对json字符串进行转换成json对象

服务器端代码:

public class JsonServlet extends HttpServlet {  /* (non-Javadoc)  * @see javax.servlet.http.HttpServlet#doPost(javax.servlet.http.HttpServletRequest, javax.servlet.http.HttpServletResponse)  */ @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String type=req.getParameter("type"); if("1".equals(type)){ ABean ab=new ABean(); ab.setName("json1"); ab.setValue("value1"); JSONObject jo=JSONObject.fromObject(ab); System.out.println(jo.toString()); resp.getWriter().print(jo); }else if("2".equals(type)){ List<ABean> labs=new ArrayList<ABean>(); ABean ab1=new ABean(); ab1.setName("json1"); ab1.setValue("value1"); ABean ab2=new ABean(); ab2.setName("json2"); ab2.setValue("value2"); labs.add(ab1); labs.add(ab2); JSONArray ja=JSONArray.fromObject(labs); System.out.println(ja.toString()); resp.getWriter().print(ja); } resp.getWriter().flush(); resp.getWriter().close();  } /* (non-Javadoc)  * @see javax.servlet.http.HttpServlet#doGet(javax.servlet.http.HttpServletRequest, javax.servlet.http.HttpServletResponse)  */ @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req, resp); }  }