HTML5利用json对象来存取复杂数据,JQuery处理json与
分类:新闻中心

首先,例如json数据如下书写:

用循环或if语句从json中取数据示例,ifjson

首先,例如json数据如下书写:

{"head": [ 
{"text":"广州","id":"广州","pid":"广东省"}, 
{"text":"郑州","id":"郑州","pid":"河南省"}], 
}

如上,倘若想将id和pid数据依次取出,就只能用循环,代码如下:

var head_id = ""; 
var head_pid = ""; 
for (var i = 0; i < data.head.length; i++) { 
head_id += data.head[i].id + " "; //循环输出json数据 
head_pid += data.head[i].pid + " "; 
} 
$("#city").append("city:" + head_id); 
$("#city").append("province:" + head_pid);

这样,将会在data之后,依次输出json中的数据。

若想有选择性的输出时,需要添加if条件,代码如下:

for (var i = 0; i < data.head.length; i++) { 
if (data.head[i].pid == "河南省") { //有选择的输出json数据 
head_pid += data.head[i].pid; 
} 
}

需要注意的是,倘若对象中有多组数据,则用data.head.id是undefined的,因为没有标明是哪组数据,例如data.head[0].id,若对象中只有一组数据,则可以直接用data.head.id输出。

另外,倘若调出来的json数据,中文乱码,一方面查看json调用的jquery代码,另一方面,可能是编写json数据的文件的问题。

以上是自学json的一点学习所得,记录一下。

(注:对象中多个数据时,直接使用)(注:对象中多个数据时,直接使用)

HTML5中可以用json对象来存取一组相关的对象,以下是个例子,我们收集一组用户输入信息,然后创建一个Object来囊括这些信息,之后用一个json字符串来表示这个Object,然后把json字符串存放在localStorage中。
之后,我们让用户检索名称,用名称为key去问localStorage取得对应的json字符串,然后解析json字符串到Object对象,吧相关信息依次从这个Object对象中提取出来,然后构造HTML文本,最后输出在指定位置:
 
HTML代码:
 
1. <!DOCTYPE html>
2. <head>
3. <meta charset="UTF-8">
4. <title>HTML5 存取复杂数据到json对象DEMO</title>
5. <script type="text/javascript" src="js/objectStorage.js"></script>
6. </head>
7. 
8. <body>
9. 
10. <h3>使用HTML5存储复杂数据到json对象</h3>
11. 
12. <h4>填写一组相关信息到表格中</h4>
13. <table>
14.     <tr><td>姓名:</td><td><input type="text" id="name"></td></tr>
15.     <tr><td>邮箱地址:</td><td><input type="text" id="email"></td></tr>
16.     <tr><td>电话号码:</td><td><input type="text" id="phone"></td></tr>
17.     <tr><td></td><td><input type="button" value="保存" onclick="saveStorage();"></td></tr>
18. </table>
19. 
20. <hr>
21. <h4> 这里将会获取已经存入localStorage的json对象,并且解析成原始信息并且展示</h4>
22. <p>
23. <input type="text" id="find">
24. <input type="button" value="检索" onclick="findStorage('msg');">
25. </p>
26. <!-- 下面这块用于显示被检索到的信息文本 -->
27. <p id ="msg"></p>
28. </body>
javascript包含2个函数,一个是存数据,一个是取数据:
1. /**
2.  *  This file is confidential by Charles.Wang
3.  *  Copyright belongs to Charles.wang
4.  *  You can make contact with Charles.Wang ([email protected])
5.  */
6.  
7.  //存一组关联数据到json对象,再把json对象存放到localStorage中
8.  function saveStorage(){
9.     
10.     //创建一个js对象,用于存放当前从表单获得的数据
11.     var data = new Object;
12.     //吧这对象的属性名依次和从用户输入的属性值关联起来
13.     data.name=document.getElementById("name").value;
14.     data.email=document.getElementById("email").value;
15.     data.phone=document.getElementById("phone").value;
16.     //创建一个json对象,让其对应刚才创建的对象的字符串数据形式
17.     var str = JSON.stringify(data);
18.     //吧json对象存放到localStorage上,key为用户输入的用户名,value为这个json字符串
19.     localStorage.setItem(data.name,str);
20.     console.log("数据已经保存! 被保存的用户名为: "+data.name);
21.  }
22.  
23.  //从localStorage按照用户输入的检索名称为key,得到对应的json字符串,然后把json字符串解析为一组信息, 并且打印到指定位置
24.  function findStorage(id){
25.     //获得用户的输入,是用户希望检索的名字
26.     var requiredPersonName = document.getElementById("find").value;
27.     //以这个检索的名字为key,来查找localStorage,得到了json字符串
28.     var str=localStorage.getItem(requiredPersonName);
29.     //解析这个json字符串得到Object对象
30.     var data= JSON.parse(str);
31.     //从Object对象中分离出相关属性值,然后构造要输出的HTML内容
32.     var result="姓名:"+data.name+'<br>';
33.     result+="电子邮箱:"+data.email+'<br>';
34.     result+="电话号码:"+data.phone+'<br>';
35.     //取得页面上要输出的容器
36.     var target = document.getElementById(id);
37.     //用刚才创建的HTML内容来填充这个容器
38.     target.innerHTML = result;
39.  }
 
演示:

一、JSON的一些基础知识。

{"head": [ 
{"text":"广州","id":"广州","pid":"广东省"}, 
{"text":"郑州","id":"郑州","pid":"河南省"}], 
}

c语言中可以不可以只用if语句实现循环?怎用if语句实现循环?以下面这个程序为例

#include<stdio.h>
int main(){
int i=1,s=i;
re:
if(i<=5)
{
s=s*i;
i++;
goto re;
}
printf("%dn",s);
return 0;
}  

  刚开始,我们设法构造多组信息,然后依次存放到localStorage中,如图(从控制台我们可以看到,我们录入了4组数据):
美高梅游戏官网网站 1
 
然后我们进行检索,比如我们输入“王帅哥”,那么和'王帅哥“相关的信息就会展示在下面:
美高梅游戏官网网站 2    

JSON中对象通过"{}"来标识,一个"{}"代表一个对象,如{"AreaId":"123"},对象的值是键值对的形式(key:value)。

如上,倘若想将id和pid数据依次取出,就只能用循环,代码如下:

JSON的if语句中怎写

先纠正一个概念,JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。不存在if的写法。你写的应该是JS的语法,else中你直接使用data数据就好了。比如说 data=[{Name:Li},{Age:20},...]可以通过data.Name来访问“Li”,通过data.Age来访问20,然后用这些数据输出到页面就可以了。  

首先,例如json数据如下书写: {"head": [ {"text":"广州","id":"广州","pid":"广东省"}, {"text":"郑州","id":...

摘自 平行线的凝聚

 "[]",标识数组,数组内部各个数据之间通过","分割,如["AreaId":"123","AreaId":"345"]。

var head_id = ""; 
var head_pid = ""; 
for (var i = 0; i < data.head.length; i++) { 
head_id += data.head[i].id + " "; //循环输出json数据 
head_pid += data.head[i].pid + " "; 
} 
$("#city").append("city:" + head_id); 
$("#city").append("province:" + head_pid);

...

很多情况下是对象数组,那就是这样:

这样,将会在data之后,依次输出json中的数据。

复制代码 代码如下:

若想有选择性的输出时,需要添加if条件,代码如下:

[{"AreaId":"123"},{"AreaId":"345"}]

for (var i = 0; i < data.head.length; i++) { 
if (data.head[i].pid == "河南省") { //有选择的输出json数据 
head_pid += data.head[i].pid; 
} 
}

 其实数组也是一个对象,上面的格式也可以写成这样:

需要注意的是,倘若对象中有多组数据,则用data.head.id是undefined的,因为没有标明是哪组数据,例如data.head[0].id,若对象中只有一组数据,则可以直接用data.head.id输出。

复制代码 代码如下:

另外,倘若调出来的json数据,中文乱码,一方面查看json调用的jquery代码,另一方面,可能是编写json数据的文件的问题。

{"Area":[{"AreaId":"123"},{"AreaId":"345"}]}

以上是自学json的一点学习所得,记录一下。

这表示一个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对象数据

您可能感兴趣的文章:

  • jQuery使用ajax方法解析返回的json数据功能示例
  • jquery的ajax异步请求接收返回json数据实例
  • 基于jQuery的AJAX和JSON实现纯html数据模板
  • 如何将ajax请求返回的Json格式数据循环输出成table形式
  • jQuery通过Ajax返回JSON数据
  • jQuery中ajax请求后台返回json数据并渲染HTML的方法

本文由美高梅网址发布于新闻中心,转载请注明出处:HTML5利用json对象来存取复杂数据,JQuery处理json与

上一篇:学习并汇集javascript匿名函数,js匿名函数的调用 下一篇:没有了
猜你喜欢
热门排行
精彩图文