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对象与打印对象分析比较
Apr 23 Javascript
如何判断元素是否为HTMLElement元素
Dec 06 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
jquery获取复选框被选中的值
Mar 22 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
jquery与ajax获取特殊字符实例详解
Jan 08 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
原生js实现抽奖小游戏
Jun 27 Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 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 中的类
2006/10/09 PHP
PHP中的正规表达式(二)
2006/10/09 PHP
Array of country list in PHP with Zend Framework
2011/10/17 PHP
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
php服务器的系统详解
2019/10/12 PHP
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
异步javascript的原理和实现技巧介绍
2012/11/08 Javascript
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
Python常用知识点汇总
2016/05/08 Python
使用TensorFlow实现SVM
2018/09/06 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
matplotlib自定义鼠标光标坐标格式的实现
2021/01/08 Python
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
职高毕业生自我鉴定
2013/10/21 职场文书
集团公司总经理岗位职责
2013/12/20 职场文书
运动会闭幕式解说词
2014/02/21 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
先进党支部事迹材料
2014/12/24 职场文书
普宁寺导游词
2015/02/04 职场文书
小学语文国培研修日志
2015/11/13 职场文书