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 相关文章推荐
jQuery UI Datepicker length为空或不是对象错误的解决方法
Dec 19 Javascript
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
js动态控制table的tr、td增加及删除的具体实现
Apr 30 Javascript
用js闭包的方法实现多点标注冒泡示例
May 29 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
Sep 04 Javascript
vue双向绑定的简单实现
Dec 22 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
Sep 27 Javascript
js实现石头剪刀布游戏
Oct 11 Javascript
antd多选下拉框一行展示的实现方式
Oct 31 Javascript
vue 中使用print.js导出pdf操作
Nov 13 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中call_user_func_array()函数的用法演示
2012/02/05 PHP
8个PHP程序员常用的功能汇总
2014/12/18 PHP
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
php生成图片验证码
2015/06/09 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
二级域名转向类
2006/11/09 Javascript
jQuery 表单验证扩展(三)
2010/10/20 Javascript
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
JS 实现banner图片轮播效果(鼠标事件)
2017/08/04 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
Python字符串匹配算法KMP实例
2015/07/18 Python
Python向日志输出中添加上下文信息
2017/05/24 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
transform python环境快速配置方法
2018/09/27 Python
python with (as)语句实例详解
2020/02/04 Python
tensorflow之并行读入数据详解
2020/02/05 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
应用服务器有那些
2012/01/19 面试题
幼师求职自荐信范文
2014/01/26 职场文书
小摄影师教学反思
2014/04/27 职场文书
离职证明范本(5篇)
2014/09/19 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
三下乡个人总结
2015/03/04 职场文书
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS