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 相关文章推荐
JS解密入门 最终变量劫持
Jun 25 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
javascript递归回溯法解八皇后问题
Apr 22 Javascript
Javascript实现检测客户端类型代码封包
Dec 03 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
轻松掌握JavaScript策略模式
Aug 25 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
聊聊Vue.js的template编译的问题
Oct 09 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
May 30 Javascript
vue中vee validate表单校验的几种基本使用
Jun 25 Javascript
JS实现Cookie读、写、删除操作工具类示例
Aug 28 Javascript
Js代码中的span拼接问题解决
Nov 22 Javascript
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
php有道翻译api调用方法实例
2014/12/22 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
PHP中基本HTTP认证技巧分析
2015/03/16 PHP
php类常量用法实例分析
2015/07/09 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
thinkjs之页面跳转同步异步操作
2017/02/05 Javascript
AngularJS自定义指令之复制指令实现方法
2017/05/18 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
通过C++学习Python
2015/01/20 Python
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
Python测试人员需要掌握的知识
2018/02/08 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
建国大业电影观后感
2015/06/01 职场文书
校园开放日新闻稿
2015/07/17 职场文书
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫
mysql sql常用语句大全
2022/06/21 MySQL