js操作json总结
2011-02-23 12:24
513 查看
一直在用写javascript的东西，却没怎么去关注json。以前需要把后台php的数据传到js中去使用，总是先把数据弄成一长的字符串，然后前台在用split去拆成数组格式，这样转换来转换去，久了就烦了，而且有时候也容易有忘掉去转换的情况，这样数组过去就乱掉了。
于是去看了看json的使用，以后把数组传到js中直接用json_encode处理下就行，js中把数组赋值给一个变量就可以直接使用，挺方便的。下面是转的网上一些json操作需要注意的东西，主要是json对象和json字符串的互转之类的。
****
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。
本文主要是对JS操作JSON的方法做下总结。在JSON中，有两种结构：对象和数组。
1. 一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。 名称用引号括起来；值如果是字符串则必须用括号，数值型则不需要。例如：
var o={"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"}；
2. 数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。
例如：
var jsonranklist=[{"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"},{"xlid":"zd","xldigitid":123456,"topscore":1500,"topplaytime":"2009-11-20"}];为了方便地处理JSON数据，JSON提供了json.js包，下载地址：http://www.json.org/json.js
在数据传输过程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。例如：
JSON字符串:
var str1 = '{ "name": "cxh", "sex": "man" }';
JSON对象:
var str2 = { "name": "cxh", "sex": "man" };
一、JSON字符串转换为JSON对象要使用上面的str1，必须使用下面的方法先转化为JSON对象：//由JSON字符串转换为JSON对象var obj = eval('(' + str + ')');或者var obj = str.parseJSON(); //由JSON字符串转换为JSON对象 或者var obj = JSON.parse(str); //由JSON字符串转换为JSON对象然后，就可以这样读取：Alert(obj.name);Alert(obj.sex); 特别注意：如果obj本来就是一个JSON对象，那么使用eval（）函数转换后（哪怕是多次转换）还是JSON对象，但是使用parseJSON（）函数处理后会有问题（抛出语法异常）。
二、可以使用toJSONString()或者全局方法JSON.stringify()将JSON对象转化为JSON字符串。例如：var last=obj.toJSONString(); //将JSON对象转化为JSON字符或者var last=JSON.stringify(obj); //将JSON对象转化为JSON字符alert(last);
注意：
上面的几个方法中，除了eval()函数是js自带的之外，其他的几个方法都来自json.js包。新版本的 JSON 修改了 API，将 JSON.stringify() 和 JSON.parse() 两个方法都注入到了 Javascript 的内建对象里面，前者变成了 Object.toJSONString()，而后者变成了 String.parseJSON()。如果提示找不到toJSONString()和parseJSON()方法，则说明您的json包版本太低。
下面是一个json在从前台传后台/从后台传前台进行处理的例子:test.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Json</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="json2.js"></script>
<script type="text/javascript">
window.onload = function()
{
var serverJsonObject = #serverJsonObject#;//json object
var serverJsonString = #serverJsonString#;//json string
var currentPath = "#currentPath#";
//alert(serverJsonObject.e.d);
//alert(serverJsonString);
};
function postJsonData()
{
var object = {'name':'a','type':'f','city':'nj'};//post json object to serverside
$.post(
'test.php',
{'jsonObject':object},
function(data){
alert(data);
}
);
}
function postJsonDataString()
{
var object = "{'name':'a','type':'f','city':'nj'}";//post json string to serverside
$.post(
'test.php',
{'jsonObject':object},
function(data){
alert(data);
}
);
}
function postJsonDataArray()
{
var object = [{'name':'a','type':'f','city':'nj'},{'name':'a','type':'f','city':'nj'}];//post json array to serverside
$.post(
'test.php',
{'jsonObject':object},
function(data){
alert(data);
}
);
}
</script>
</head>
<body>
<div>
<input type="button" onclick="postJsonData()" value="post object"/>
<input type="button" onclick="postJsonDataString()" value="post string"/>
<input type="button" onclick="postJsonDataArray()" value="post array"/>
</div>
</body>
</html>
test.php<?php
$arr = array('a'=>'12','e'=>array('d'=>'22'),'b'=>'13','c'=>'14');
$str = "";
$html_arr = json_encode ( $arr );
$html_str = json_encode ( $str );
$currentPath = dirname(__FIlE__).DIRECTORY_SEPARATOR;
if(isset($_POST['jsonObject']))
{
var_dump ( $_POST['jsonObject'] );
die();
}
$str_buffer = file_get_contents ( dirname(__FIlE__).DIRECTORY_SEPARATOR."test.html" );
$str_buffer = str_replace ( "#serverJsonObject#", $html_arr, $str_buffer );
$str_buffer = str_replace ( "#serverJsonString#", $html_str, $str_buffer );
$str_buffer = str_replace ( "#currentPath#", $currentPath, $str_buffer );
echo $str_buffer;
flush();
?>
这样一来，用赶来应该不会混淆了。
于是去看了看json的使用，以后把数组传到js中直接用json_encode处理下就行，js中把数组赋值给一个变量就可以直接使用，挺方便的。下面是转的网上一些json操作需要注意的东西，主要是json对象和json字符串的互转之类的。
****
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。
本文主要是对JS操作JSON的方法做下总结。在JSON中，有两种结构：对象和数组。
1. 一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。 名称用引号括起来；值如果是字符串则必须用括号，数值型则不需要。例如：
var o={"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"}；
2. 数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。
例如：
var jsonranklist=[{"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"},{"xlid":"zd","xldigitid":123456,"topscore":1500,"topplaytime":"2009-11-20"}];为了方便地处理JSON数据，JSON提供了json.js包，下载地址：http://www.json.org/json.js
在数据传输过程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。例如：
JSON字符串:
var str1 = '{ "name": "cxh", "sex": "man" }';
JSON对象:
var str2 = { "name": "cxh", "sex": "man" };
一、JSON字符串转换为JSON对象要使用上面的str1，必须使用下面的方法先转化为JSON对象：//由JSON字符串转换为JSON对象var obj = eval('(' + str + ')');或者var obj = str.parseJSON(); //由JSON字符串转换为JSON对象 或者var obj = JSON.parse(str); //由JSON字符串转换为JSON对象然后，就可以这样读取：Alert(obj.name);Alert(obj.sex); 特别注意：如果obj本来就是一个JSON对象，那么使用eval（）函数转换后（哪怕是多次转换）还是JSON对象，但是使用parseJSON（）函数处理后会有问题（抛出语法异常）。
二、可以使用toJSONString()或者全局方法JSON.stringify()将JSON对象转化为JSON字符串。例如：var last=obj.toJSONString(); //将JSON对象转化为JSON字符或者var last=JSON.stringify(obj); //将JSON对象转化为JSON字符alert(last);
注意：
上面的几个方法中，除了eval()函数是js自带的之外，其他的几个方法都来自json.js包。新版本的 JSON 修改了 API，将 JSON.stringify() 和 JSON.parse() 两个方法都注入到了 Javascript 的内建对象里面，前者变成了 Object.toJSONString()，而后者变成了 String.parseJSON()。如果提示找不到toJSONString()和parseJSON()方法，则说明您的json包版本太低。
下面是一个json在从前台传后台/从后台传前台进行处理的例子:test.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Json</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="json2.js"></script>
<script type="text/javascript">
window.onload = function()
{
var serverJsonObject = #serverJsonObject#;//json object
var serverJsonString = #serverJsonString#;//json string
var currentPath = "#currentPath#";
//alert(serverJsonObject.e.d);
//alert(serverJsonString);
};
function postJsonData()
{
var object = {'name':'a','type':'f','city':'nj'};//post json object to serverside
$.post(
'test.php',
{'jsonObject':object},
function(data){
alert(data);
}
);
}
function postJsonDataString()
{
var object = "{'name':'a','type':'f','city':'nj'}";//post json string to serverside
$.post(
'test.php',
{'jsonObject':object},
function(data){
alert(data);
}
);
}
function postJsonDataArray()
{
var object = [{'name':'a','type':'f','city':'nj'},{'name':'a','type':'f','city':'nj'}];//post json array to serverside
$.post(
'test.php',
{'jsonObject':object},
function(data){
alert(data);
}
);
}
</script>
</head>
<body>
<div>
<input type="button" onclick="postJsonData()" value="post object"/>
<input type="button" onclick="postJsonDataString()" value="post string"/>
<input type="button" onclick="postJsonDataArray()" value="post array"/>
</div>
</body>
</html>
test.php<?php
$arr = array('a'=>'12','e'=>array('d'=>'22'),'b'=>'13','c'=>'14');
$str = "";
$html_arr = json_encode ( $arr );
$html_str = json_encode ( $str );
$currentPath = dirname(__FIlE__).DIRECTORY_SEPARATOR;
if(isset($_POST['jsonObject']))
{
var_dump ( $_POST['jsonObject'] );
die();
}
$str_buffer = file_get_contents ( dirname(__FIlE__).DIRECTORY_SEPARATOR."test.html" );
$str_buffer = str_replace ( "#serverJsonObject#", $html_arr, $str_buffer );
$str_buffer = str_replace ( "#serverJsonString#", $html_str, $str_buffer );
$str_buffer = str_replace ( "#currentPath#", $currentPath, $str_buffer );
echo $str_buffer;
flush();
?>
这样一来，用赶来应该不会混淆了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 