ajax,json
一、JSON的一些基础知识。
JSON中对象通过"{}"来标识,一个"{}"代表一个对象,如{"AreaId":"123"},对象的值是键值对的形式(key:value)。
"[]",标识数组,数组内部各个数据之间通过","分割,如["AreaId":"123","AreaId":"345"]。
很多情况下是对象数组,那就是这样:
1 | [{"AreaId":"123"},{"AreaId":"345"}] |
其实数组也是一个对象,上面的格式也可以写成这样:
1 | {"Area":[{"AreaId":"123"},{"AreaId":"345"}]} |
这表示一个Area对象,他有两个子数据,每个子数据也是一个对象,每个子对象都是AreaId。
JSON中字符串和字符的定义格式和一般的类C语言定义是类似的,双引号定义字符串,单引号定义字符。
JSON的键(Key)用双引号括起来,比如上面的"Area"和"AreaId",都是用双引号括起来的,在一些语言中构造JSON字符串的时候,可以使用转义字符转义双引号。
二、javascript操作JSON字符
1、先要区分JSON字符串和JSON对象
JSON字符串:
1 | Var strJSON = "{"Area":[{"AreaId":"123"},{"AreaId":"345"}]}", |
其实也可以写成这样:
1 | Var strJSON = ‘{"Area":[{"AreaId":"123"},{"AreaId":"345"}]}', |
这表示一个JSON字符串,由于在Js中单引号和双引号都可以表示一个字符串,所以上面第一个使用双引号和第二个使用单引号的都表示一个JSON字符串。
下面看看JSON对象
1 | Var JSON = {"Area":[{"AreaId":"123"},{"AreaId":"345"}]}, |
看到了吧,JSON对象最外面是没有单引号或者双引号的,这就表示一个JSON对象。
在服务器断的脚本:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <?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对象(如下)
1 2 3 4 5 6 | 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); }) |
第二种:不需要转化的:
1 2 3 4 5 | var arr = { "red" :{ "id" :1, "name" : "mary" }, "blue" :{ "id" :2, "name" : "u71d5u5b50" }}; $.each(arr, function (idx,item){ //输出 alert(item.id+ "哈哈" +item.name); }) |
循环也有两种方法:
//方法一:
1 2 3 4 | $.each(arr, function (idx,item){ //输出 alert(item.id+ "哈哈" +item.name); }) |
//方法二:
1 2 3 4 | for ( var key in arr){ alert(key); alert(arr[key].status); } |
大家可以试试效果。
ajax返回JSON时的处理方式
1,使用普通的aspx页面来处理
本人觉得这种方式处理起来是最简单的了,看下面的代码吧
1 2 3 4 5 6 7 8 9 10 11 12 | $.ajax({ type: "post" , url: "Default.aspx" , dataType: "json" , success: function (data) { $( "input#showTime" ).val(data[0].demoData); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown); } }); |
这里是后台传递数据的代码
1 2 3 4 5 | Response.Clear(); Response.Write( "[{" demoData ":" This Is The JSON Data "}]" ); Response. Flush (); Response. End (); |
这种处理的方式将传递过来的数据直接解析为json数据,也就是说这里的前台js代码可能直接把这些数据解析成json对象数据,而并非字符串数据,如data[0].demoData,这里就直接使用了这个json对象数据
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· DeepSeek火爆全网,官网宕机?本地部署一个随便玩「LLM探索」
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 上周热点回顾(1.20-1.26)