javascript中json的使用说明

json简单介绍:

JSON---JavaScriptObjectNotation(javascript数据对象表示)。

和xml,txt,word,excel一样是一种数据存储方式,但是json以简洁,方便,快速而鹤立鸡群!

json是以键值对的形式存储数据的,有点像哈希表一样

json适用的语言:貌似是语言都能用

json很面向对象

----------------------------------------------------------------------------------------------------------------------------------

javascript中使用json:

因为json是javascript中的原生格式就像我们使用javajdk里面涵盖了java为我们提供的类一样,同样浏览器里面定义了解析json的方式,哈哈不用导入js包什么的很爽吧!

一、json在javascript使用实例

例一:

Js代码

functionswapOne(){

vars_json={"UserID":11,"Name":"Truly","Email":"zhuleipro@hotmail.com"};

alert(s_json.UserID);//或者alert(s_json["userID"]);

}

输出:11

例二:

Java代码

functionswapOne(){

vars_json={"UserID":11,"Name":{"FirstName":"Truly","LastName":"Zhu"},"Email":"zhuleipro◎hotmail.com"};

alert(s_json.Name.FirstName);//或者alert(s_json["Name"].FirstName);//或alert(s_json["Name"]["FirstName"]);

}

输出:Truly

例三:

Java代码

functionswapOne(){

vars_json=[

{"UserID":11,"Name":{"FirstName":"Truly1","LastName":"Zhu"},"Email":"zhuleipro◎hotmail.com"},

{"UserID":12,"Name":{"FirstName":"Truly2","LastName":"Zhu"},"Email":"zhuleipro◎hotmail.com"},

{"UserID":13,"Name":{"FirstName":"Truly3","LastName":"Zhu"},"Email":"zhuleipro◎hotmail.com"},

{"UserID":14,"Name":{"FirstName":"Truly4","LastName":"Zhu"},"Email":"zhuleipro◎hotmail.com"},

{"UserID":15,"Name":{"FirstName":"Truly5","LastName":"Zhu"},"Email":"zhuleipro◎hotmail.com"},

];

alert(s_json[0].Name.FirstName);

}

输出:Truly1

其实json就像我们在java程序中定义的实体类一样,不过以两一种方式显示出来罢了!我们使用它的值的时候直接用点(或者使用像上面的s_json["Name"]["FirstName"]这样的方式)完全可以把每个{}当做一个对象来对待;

ajax中使用json进行数据交换:

json我感觉他的主要作用就是进行服务器和客户端数据的传输所以说在ajax中使用才是关键:

Java代码

<scriptlanguage="javascript"type="text/javascript">

//input文本框联想

functioncheckword(input_text){

varwordvalue=input_text.value;

if(wordvalue==null||wordvalue==""){

return;

}

//创建XMLHttpRequest对象

varselectvalue="";

varxmlhttp;

if(window.XMLHttpRequest){//codeforIE7+,Firefox,Chrome,Opera,Safari

xmlhttp=newXMLHttpRequest();

}else{//codeforIE6,IE5

xmlhttp=newActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function(){

if(xmlhttp.readyState==4&&xmlhttp.status==200){

selectvalue=xmlhttp.responseText;

//在这里已经获取到值了

<spanstyle="color:#ff0000;">vars_json_t=eval(select_value);

alert(s_json_t[0].UserID);

</span>}

}

//alert("create_select_value.jsp?mc="+input_text.value+"&t="+Math.random());

xmlhttp.open("POST","create_select_value.jsp?t="+Math.random(),true);

xmlhttp.send();

}

</script>

Java代码

上图中xmlhttp.responseText为返回数据:(我返回的是String类型的)返回后再在javascript里面处理,

这样一方面耗费的是客户端的资源,另一方面比在服务器端处理更快捷,因为在传输过程中json格式总比字符串

耗费资源吧!<imgsrc="/images/smiles/icon_biggrin.gif"alt="">

这样json在javascript里面基础用法也就差不多了!

现在简单介绍一下:eval因为我刚开始看的时候搞的蛋很疼!

看javascript手册是这样写的:

-----------------开始------------------------------------------------------------------------------------------------------------定义和用法

eval()函数可计算某个字符串,并执行其中的的JavaScript代码。

语法

eval(string)

参数描述

string必需。要计算的字符串,其中含有要计算的JavaScript表达式或要执行的语句。

返回值

通过计算string得到的值(如果有的话)。

-----------------结束-----------------------------------------------------------------------------------------------------------

例一:

Java代码

<scriptlanguage="javascript"type="text/javascript">

varvalues=eval("2+3");

alert(values);

</script>

Java代码

输出:5

例二:

Java代码

<scripttype="text/javascript">

functionswapOne(){

varthe_image=prompt("请输入要更换图片的name","");

}

</script>

明显可以看出eval的执行过程了!

他都是先将括号里面的值完全的转换成字符串,然后为其去掉双引号罢了.......(不知道这样理解对不对!)!

Java代码

<scriptlanguage="javascript"type="text/javascript">

functionswapOne(){

vars_json='[{"UserID":11,"Name":{"FirstName5":"Truly1","LastName":"Zhu"},"Email":"zhuleipro◎hotmail.com"},{"UserID":12,"Name":{"FirstName4":"Truly2","LastName":"Zhu"},"Email":"zhuleipro◎hotmail.com"},{"UserID":13,"Name":{"FirstName3":"Truly3","LastName":"Zhu"},"Email":"zhuleipro◎hotmail.com"},{"UserID":14,"Name":{"FirstName2":"Truly4","LastName":"Zhu"},"Email":"zhuleipro◎hotmail.com"},{"UserID":15,"Name":{"FirstName1":"Truly5","LastName":"Zhu"},"Email":"zhuleipro◎hotmail.com"},]';

vars_json_t=eval(s_json);

alert(s_json_t[0].UserID);

}

</script>

相关推荐