jquery处理json数据实例分析


Posted in Javascript onJune 03, 2014

一、JSON的一些基础知识。

JSON中对象通过“{}”来标识,一个“{}”代表一个对象,如{“AreaId”:”123”},对象的值是键值对的形式(key:value)。

 “[]”,标识数组,数组内部各个数据之间通过“,”分割,如[“AreaId”:”123”,”AreaId”:”345”]。

很多情况下是对象数组,那就是这样:

[{“AreaId”:”123”},{“AreaId”:”345”}]

其实数组也是一个对象,上面的格式也可以写成这样:

{“Area”:[{“AreaId”:”123”},{“AreaId”:”345”}]}

这表示一个Area对象,他有两个子数据,每个子数据也是一个对象,每个子对象都是AreaId。

 JSON中字符串和字符的定义格式和一般的类C语言定义是类似的,双引号定义字符串,单引号定义字符。

JSON的键(Key)用双引号括起来,比如上面的“Area“和”AreaId“,都是用双引号括起来的,在一些语言中构造JSON字符串的时候,可以使用转义字符转义双引号。

 二、javascript操作JSON字符

1、先要区分JSON字符串和JSON对象

JSON字符串:

Var strJSON = “{“Area”:[{“AreaId”:”123”},{“AreaId”:”345”}]}”,

其实也可以写成这样:

Var strJSON = ‘{“Area”:[{“AreaId”:”123”},{“AreaId”:”345”}]}',

这表示一个JSON字符串,由于在Js中单引号和双引号都可以表示一个字符串,所以上面第一个使用双引号和第二个使用单引号的都表示一个JSON字符串。

下面看看JSON对象

Var JSON = {“Area”:[{“AreaId”:”123”},{“AreaId”:”345”}]},

看到了吧,JSON对象最外面是没有单引号或者双引号的,这就表示一个JSON对象。

在服务器端的脚本:

<?php
$data['id'] = 1;
$dat['name'] = "mary";
$da['red']= array_merge($data,$dat);
$data1['id'] = 2;
$dat1['name'] = "燕子";
$da['blue']= array_merge($data1,$dat1);
print_r($da);///打印出来是一个二维数组(如下)
/*
Array
(
    [red] => Array
        (
            [id] => 1
            [name] => mary
        )
    [blue] => Array
        (
            [id] => 2
            [name] => 燕子
        )
)
*/
echo json_encode($da);//输出的是一个转化成json格式的字符串,可以直接在js中用(如下)
/*
{"red":{"id":1,"name":"mary"},"blue":{"id":2,"name":"u71d5u5b50"}}
*/
?>

jquery脚本:

返回到js后的处理:
第一种要用到varl转化的:是字符串的时候就要用eval转化成jquery对象(如下)

var arr = '{"red":{"id":1,"name":"mary"},"blue":{"id":2,"name":"u71d5u5b50"}}';//u71d5u5b50这个是php中自动转换的
var dataObj = eval("("+arr+")");//这里要加上加好括号和双引号的原因我也不知道,就当是json语法,只能死记硬背了
  $.each(dataObj,function(idx,item){  
   //输出 
   alert(item.id+"哈哈"+item.name);  
})

第二种:不需要转化的:

var arr = {"red":{"id":1,"name":"mary"},"blue":{"id":2,"name":"u71d5u5b50"}};
  $.each(arr,function(idx,item){    
   //输出
   alert(item.id+"哈哈"+item.name);
})

循环也有两种方法:
//方法一:

$.each(arr,function(idx,item){    
   //输出
   alert(item.id+"哈哈"+item.name);
})

//方法二:

for(var key in arr){
  alert(key);
  alert(arr[key].status);
 }

大家可以试试效果。

ajax返回JSON时的处理方式

 1,使用普通的aspx页面来处理
本人觉得这种方式处理起来是最简单的了,看下面的代码吧

$.ajax({
  type: "post",
  url: "Default.aspx",
  dataType: "json",
  success: function (data) {
          $("input#showTime").val(data[0].demoData);
  },
  error: function (XMLHttpRequest, textStatus, errorThrown) {
          alert(errorThrown);
   }
});

这里是后台传递数据的代码

Response.Clear();
Response.Write("[{"demoData":"This Is The JSON Data"}]");
Response.Flush();
Response.End();

这种处理的方式将传递过来的数据直接解析为json数据,也就是说这里的前台js代码可能直接把这些数据解析成json对象数据,而并非字符串数据,如data[0].demoData,这里就直接使用了这个json对象数据

Javascript 相关文章推荐
Javascript与vbscript数据共享
Jan 09 Javascript
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
实例讲解JavaScript中instanceof运算符的用法
Jun 08 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 Javascript
JS产生随机数的用法小结
Dec 10 Javascript
通过js控制时间,一秒一秒自己动的实例
Oct 25 Javascript
JavaScript实现单英文金山打字通
Jul 24 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
js 获取浏览器版本以此来调整CSS的样式
Jun 03 #Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 #Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 #Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 #Javascript
jquery动态改变form属性提交表单
Jun 03 #Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 #Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 #Javascript
You might like
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
学习JavaScript设计模式(接口)
2015/11/26 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
js插件dropload上拉下滑加载数据实例解析
2016/07/27 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
Python字符和字符值(ASCII或Unicode码值)转换方法
2015/05/21 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
pytorch 更改预训练模型网络结构的方法
2019/08/19 Python
基于Django框架的权限组件rbac实例讲解
2019/08/31 Python
python+Selenium自动化测试——输入,点击操作
2020/03/06 Python
python中os.remove()用法及注意事项
2021/01/31 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
Blank NYC官网:夹克、牛仔裤等
2020/12/16 全球购物
工程班组长岗位职责
2013/12/30 职场文书
初三学习决心书
2014/03/11 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
房地产活动策划方案
2014/05/14 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
Python数组变形的几种实现方法
2022/05/30 Python