js/jquery解析json和数组格式的方法详解


Posted in Javascript onJanuary 09, 2014

在解析之前,我们必须弄清楚几个概念:数组,关联数组以及json之间有哪些区别和联系点?

一.概念介绍
1.数组

语法:
ECMAScript v3规定了数组直接量的语法,JavaScript 1.2和JScript 3.0实现了它。可以把—个用逗号分隔的表达式列表放在方括号中,创建并初始化—个数组。这些表达式的值将成为数组元素。例如:

var a = [1, true, 'abc'];

具体操作查看API.

ps:必须方括号隔开。

2.关联数组

1.语法:
var myhash= {”key1″:”val1″, “key2″:”val2″ };//obj

2.var
myhash= {key1:”val1″, key2:”val2″ };//obj-也可以

ps:跟json格式几乎相同,但是json格式要求更加严格(里面的键值对必须使用双引号),但json只能作为一种格式标准,如果要对其进行操作必须转换成关联数组对象(obj)。

2.简单操作
1.向Hash关联数组添加键值

// 添加一个新键 newkey ,键值为 newval

myhash[”newkey”] = “newval”;

2.删除Hash关联数组已有键值

// 删除一个键 newkey ,同时,该键值对应的 newval 也就消失了
delete myhash[”newkey”];

3.遍历Hash关联数组

// 遍历整个hash 数组
for (key in myhash) {
val = myhash[key];
}

4.获得值

方式1.myhash.key1
方式2.myhash.key2

3.json
格式要求:

{”key1″:”val1″, “key2″:”val2″ };//严格按照此格式,操作可依照关联数组的操作

二.前后台交互中几个关键点
1.当服务器发送的数据不是一条json,而是多条json时,则应当联系数组和关联数组来组装字符串
例如:var objs = [{ id: 1, name: 'n_1' }, { id: 2, name: 'n_2'}];

2.至始至终服务器给客户端的数据都只是字符串,因此为了让其能够在js中对其进行必要的操作,可以通过eval()进行转换成js可执行的对象。
因此jQuey中提供的$.parseJSON()是有局限的,如果是上面1提到的这种情况则就必须使用eval()进行转换,然后再通过$.each(objs,function(i,o){...})进行操作

三.具体的实例代码
页面代码:

<body>
 <input type="button" value="send ajax json" onclick="sendAjaxByjson();"/>
 <input type="button" value="send ajax array" onclick="sendAjaxByarray();"/>
</body>
 <script type="text/javascript">
  function sendAjaxByjson(){
   $.post("json",{},function(data){
    var obj=data;
    alert(typeof obj);//string
    //var a=eval(obj);不解,不注释则会报错..
    var strToobj=$.parseJSON(obj);
    alert(strToobj.name);
    alert(typeof strToobj)//obj
    var obja={'name':'techbirds','age':'23','sex':'male'};
    alert(typeof obja);//obj
    alert(obja['name']+":"+obja.age);
    delete obja['name'];
   });
  }
  function sendAjaxByarray(){
   $.post("array",{},function(data){
    var str=data;
    alert(typeof str);//string
    alert(typeof eval(str));//object
    var obja=[1,2,3,4,5];
    alert(typeof obja);//object   });
  }
 </script>

后台代码:
@Override
 protected void service(HttpServletRequest req, HttpServletResponse reps)
   throws ServletException, IOException {
  Map<String, Object> jsonMap=new HashMap<String, Object>();
  jsonMap.put("name", "techbirds");
  jsonMap.put("age", 23);
  jsonMap.put("sex", "male");
  reps.getWriter().print(JSONObject.fromObject(jsonMap).toString());
  reps.getWriter().flush();
  reps.getWriter().close(); }

 @Override
 protected void service(HttpServletRequest req, HttpServletResponse reps)
   throws ServletException, IOException {
  String array="[1,2,3,4,5,6]";
  reps.getWriter().print(array);
  reps.getWriter().flush();
  reps.getWriter().close(); }
Javascript 相关文章推荐
javascript中的location用法简单介绍
Mar 07 Javascript
Jquery乱码的一次解决过程 图解教程
Feb 20 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
javascript中的3种继承实现方法
Jan 27 Javascript
js canvas仿支付宝芝麻信用分仪表盘
Nov 16 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
jQuery实现两列等高并自适应高度
Dec 22 Javascript
Scala解析Json字符串的实例详解
Oct 11 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
简单了解JavaScript中的执行上下文和堆栈
Jun 24 Javascript
微信小程序中使用 async/await的方法实例分析
May 06 Javascript
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
JS获取节点的兄弟,父级,子级元素的方法
Jan 09 #Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 #Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 #Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
Jan 09 #Javascript
fmt:formatDate的输出格式详解
Jan 09 #Javascript
js中window.open()的所有参数详细解析
Jan 09 #Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 #Javascript
You might like
php curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
DOM相关内容速查手册
2007/02/07 Javascript
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
Python使用requests发送POST请求实例代码
2018/01/25 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
python cumsum函数的具体使用
2019/07/29 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
CSS3 边框效果
2019/11/04 HTML / CSS
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
比较基础的php面试题及答案-填空题
2014/04/26 面试题
财务出纳员岗位职责
2013/11/26 职场文书
教师个人剖析材料
2014/02/05 职场文书
2014单位领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技