JQuery处理json与ajax返回JSON实例代码


Posted in Javascript onJanuary 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 DOM 添加事件
Feb 14 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
May 07 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 Javascript
JavaScript实现Base64编码转换
Apr 23 Javascript
javascript实现的猜数小游戏完整实例代码
May 10 Javascript
javascript定时器取消定时器及优化方法
Jul 08 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
ECharts transform数据转换和dataZoom在项目中使用
Dec 24 Javascript
jquery.post用法示例代码
Jan 03 #Javascript
简单的代码实现jquery定时器
Jan 03 #Javascript
jquery将一个表单序列化为一个对象的方法
Jan 03 #Javascript
jQuery的DOM操作之删除节点示例
Jan 03 #Javascript
JQuery中dataGrid设置行的高度示例代码
Jan 03 #Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 #Javascript
js传中文参数controller里获取参数乱码问题解决方法
Jan 03 #Javascript
You might like
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
js实现快速分享功能(你的文章分享工具)
2013/06/25 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
JS中from 表单序列化提交的代码
2017/01/20 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
Python设计模式之代理模式简单示例
2018/01/09 Python
对python sklearn one-hot编码详解
2018/07/10 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
python 带时区的日期格式化操作
2020/10/23 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
有关HTML5页面在iPhoneX适配问题
2017/11/13 HTML / CSS
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
小学家长通知书评语
2014/12/31 职场文书
助学金感谢信
2015/01/20 职场文书
公路施工安全责任书
2015/05/08 职场文书
社区低保工作总结2015
2015/07/23 职场文书