前端操作json

一时失言乱红尘 2022-06-09 07:23 140阅读 0赞

# **前端操作json** #

###  **一.JSON字符串与JSON对象的区别** ###

1. 一个对象以“\{” 开始， “\}”结束。 每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间运用 “,”（逗号）分隔。 名称用引号括起来；值如果是字符串则必须用括号，数值型则不须要。例如：

var o=\{"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"\}；

2. 数组是值（value）的有序集合。一个数组以“\[”开始， “\]” 结束。值之间运用 “,”（逗号）分隔。

为了方便地处理JSON数据，JSON提供了json.js包，下载地址：[http://www.json.org/json.js][http_www.json.org_json.js]一般现在用json2.js。

JSON对象是直接可以使用JQuery操作的格式，和js中的对象一样，可以用对象（类名）点出属性（方法）。

JSON字符串仅仅只是一个字符串，一个整体，不截取的话没办法取出其中存储的数据，不能直接使用，除非你只想alert()；

在数据传输流程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。例如：

**JSON字符串:**

var str1 = '\{ "name": "cxh", "sex": "man" \}';

**JSON对象:**

var str2 = \{ "name": "cxh", "sex": "man" \};

**JavaScript 对象表示法（字面量表示法）。**

var book = \{\}; //创建一个没有属性的对象

var book = \{

name : "The Definitive Guide",

"main title" : "JavaScript", //当属性名中间有空格，或者"-"时，要用引号把属性名括起来

author : \{ //对象的属性也可以是对象

firstname : "Rex",

lastname : "Mai

\};

看起来都是key-value的键值对，很像js的对象吧？没错，但同时JSON表示不服，我不能跟js的对象长成一样啊，我得有我自己的个性，于是规定键\-值对中的键必须用双引号！同时规定键\-值对中的值的取值有一定要求：

JSON 值可以是：

数字（整数或浮点数）

字符串（在双引号中）

逻辑值（true 或 false）

数组（在方括号中）

对象（在花括号中）

null

## **二.JSON字符串转换为JSON对象** ##

由JSON字符串转换为JSON对象

**Eval()**

eval() 的参数是一个字符串。如果字符串表示了一个表达式，eval() 会对表达式求值。如果参数表示了一个或多个 JavaScript 声明， 那么 eval() 会执行声明。

var jsonStr = '\{"name": "hanzichi", "sex": "male"\}';js自带的方法

var ans = eval('(' + jsonStr + ')');

console.log(ans.name, ans.sex); // hanzichi male

eval 函数非常快，但是它可以编译任何 javascirpt 代码，这样的话就可能产生安全的问题。eval 的使用是基于传入的代码参数是可靠的假设下，有一些情况下，可能客户端是不可信任的。如果基于安全的考虑的话，最好是使用一个JSON解析器(json2.js)，一个JSON 解析器将只接受JSON文本，所以是更安全的，如下。

**parse(str)**

JSON.parse（json字符串 \-> json对象）

var jsonStr = '\{"name": "hanzichi", "sex": "male"\}';

var obj = JSON.parse(jsonStr);

console.log(typeof obj, obj); // object Object \{name: "hanzichi", sex: "male"\}

**parseJSON()**

var obj = jQuery.parseJSON('\{"name":"John"\}');

alert( obj.name === "John" );//由JSON字符串转换为JSON对象jQuery插件支持的转换方式：

然后，就可以这样读取：

Alert(obj.name);

传入一个畸形的JSON字符串会抛出一个异常。比如下面的都是畸形的JSON字符串：

\{test: 1\} （ test 没有包围双引号）

\{'test': 1\} （使用了单引号而不是双引号）

另外，如果你什么都不传入，或者一个空字符串、null或undefined，parseJSON都会返回 null 。

**注意**：如果obj本来就是一个JSON对象，那么运用 eval（）函数转换后（哪怕是多次转换）还是JSON对象，但是运用 parseJSON（）函数处理后会有疑问（抛出语法异常）。

## **三.JSON对象转化为JSON字符串。** ##

**stringify(obj);**

JSON.stringify（json对象 \-> json字符串）

var obj = \{name: 'hanzichi', sex: 'male', age: '10'\};

var jsonStr = JSON.stringify(obj);

console.log(jsonStr); // \{"name":"hanzichi","sex":"male","age":"10"\}

## **四.读取JSON对象的方法** ##

var str2 = \{ "name": "haorooms", "sex": "man" \};

就可以这样读取：

alert(str2.name);

//弹出” haorooms”。

我们遇到的JSON很少有这么简单的，比如复杂一点的JSON对象如：

var str=\{"GetUserPostByIdResult":\{"Age":"33","ID":"2server","Name":"haorooms"\}\};

解析用：

alert(str.GetUserPostByIdResult.Name); //弹出haorooms

# **后端操作Json** #

## **Gson对象** ##

Gson有2个最基本的方法  
1) toJson() – 转换java 对象到JSON  
2) fromJson() – 转换JSON到java对象

HashMap<String, Object> map=new Gson().fromJson(resultJson, HashMap.class);转换为map类型

new Gson().toJson(user).toString()转化为json

向前台发送json字符串

@ResponseBody

**public** String phoneyanzheng(HttpServletRequest request,HttpServletResponse response) \{

Map<String, Object> map = **new** HashMap<String, Object>();

map.put("msg", info);info为后台返回的信息

**return new** Gson().toJson(map);

$.ajax(\{

type : "POST",

dataType: "json",

url : "$\{ctx\}/bbs/login/getCode",

data : $("\#userform").serialize(),//userform为表单id

success : **function**(result) \{

alert(result.msg)

## **JSONObject对象** ##

要引入"net.sf.json"包

JSONObject与new Gson()前者侧重于存取后者侧重于转换

JSONObject obj = new JSONObject(resultJson);转化为json

JSONObject o=(JSONObject) obj.get("data");//获取

String info=o.getString("errCode");

## **JSONObject和JSONArray的区别** ##

区别在于JSONObject是一个\{\}包裹起来的一个对象(Object)，  
而JSONArray则是\[\]包裹起来的一个数组(Array)，

往JSONArray中添加JSONObject对象。发现JSONArray跟JSONObject的区别就是JSONArray比JSONObject多中括号\[\]

jsonObj:\{"name0":"zhangsan","sex1":"female"\}

jsonArray:\[\{"name":"xuwei","sex":"male"\}\]

技术改变世界

[http_www.json.org_json.js]: http://www.json.org/json.js

前端操作json

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 JQuery前端如何操作JSON

相关 JQuery前端如何操作JSON

相关 lottie 前端JSON动画

相关前端 JavaScript -- Json

相关 Js 操作json

相关前端操作json

相关 javaScript操作json

相关 SpringMVC操作JSON

相关前端之json

相关 JSON操作扩展