js操作json总结

最新推荐文章于 2024-04-21 14:34:19 发布

KylinBL

最新推荐文章于 2024-04-21 14:34:19 发布

阅读量3.6k

点赞数

分类专栏：前端开发文章标签： json javascript object function buffer button

前端开发专栏收录该内容

68 篇文章 0 订阅

订阅专栏

一直在用写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" οnclick="postJsonData()" value="post object"/>
<input type="button" οnclick="postJsonDataString()" value="post string"/>
<input type="button" οnclick="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();
?>

这样一来，用赶来应该不会混淆了。

KylinBL

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
js操作json总结

<br /> 一直在用写javascript的东西，却没怎么去关注json。以前需要把后台php的数据传到js中去使用，总是先把数据弄成一长的字符串，然后前台在用split去拆成数组格式，这样转换来转换去，久了就烦了，而且有时候也容易有忘掉去转换的情况，这样数组过去就乱掉了。
复制链接

扫一扫