js 解析json 常用方法 --前端与后端的交互（前端）

最新推荐文章于 2025-10-13 09:35:33 发布

原创最新推荐文章于 2025-10-13 09:35:33 发布 · 置顶 · 2.5w 阅读

62 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #javascript #前端 #json

前端与后端的交互专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了前端JavaScript解析JSON数据的方法，包括定义和操作JSON对象与数组，解析后端传来的JSON字符串，以及将JSON对象转换为JSON字符串的过程。

（1）前端js解析前端json数据：

后端java解析json常用方法请参考：java解析json--后端

one:

javascript定义json对象变量：

var jsonobject={};//可以不使用声明，推荐声明一下，严格一些，最好使用严格模式

赋值json对象的key-value值：

jsonobject[key]=value;//不严格的话就直接，var jsonobject={'key':'value',...}

可以先判断json中是否存在某个key（可以忽略）：

if(jsonobject.hasOwnProperty("key")){
   //判断存在之后执行的动作
}

遍历json对象1(分已知key值和未知key值两种方式遍历)：

var jsonobject={"name":"张三","sex":"女"}

//1.获取key-value方法（不知道key值的情况）：

for(var key in jsonobject){

alert(key);//获取json对象的key

alert(jsonobject[key]);//获取json对象key对应的value值
/*
 使用jsonobject.key是错误的；这会被识别为jsonobject里面存在‘key’这个key值
*/
}

//2.获取value方法（知道key值的情况）：

alert(jsonobject.name);

alert(jsonobject.sex);

遍历json对象2：

var jsonobject={

"0":{"name":"2"，"sex":"1"}，

"1":{"name":"3","sex":"7"}

}；

for(var key in jsonobject){

alert(key);//获取key

for(var subkey in jsonobject[key]){

alert(jsonobject[key].name)//获取具体key的value值

alert(subkey);//获取子key

//获取subkey的value值（方法行不通:jsonobject[key][subkey]，返回的是undefined）

//正确获取subkey的value值

alert(eval("jsonobject[key]."+subkey));

}

}

two:

定义json数组变量：

var jsonarray=[];//跟上面一样，可以不严格

赋值json数组值: 推荐使用jsonarray.push()方法赋值，其他变量，如jsonarray,push(jsonObject)等；

var json={

"name":"1",

"sex":"3"

};

var json2={

"name":"5",

"sex":"7"

};

jsonarray.push(json);

jsonarray.push(json2);

遍历json数组：

for(var i=0;i<jsonarray.length;i++){//或者使用for(var subkey in jsonarray)

alert(jsonarray[i].name)//获取json数组key对应的value

for(var key in jsonarray[i]){

alert(key);//获取json对象key

alert(jsonarray[i][key])//获取json对象value

//不能使用jsonarray[i].key来获取value值，因为它会把key识别成它的属性，变成key值为"key"

}

}

(2) 前端js解析后端json数据字符串

后端传来的json字符串：

jsonstr=[{"RES":"OK","MSG":"success"}]//或jsonstr=[{..},{..},[{..},{..}]]

解析：

var jsonArray=JSON.parse(jsonstr);//一般使用这种方法，将数据转换成JavaScript对象

/*
或var jsonArray=eval('('+jsonstr+')');//此方法不建议用来转json

或var jsonArray=jsonstr.parseJSON();//此方法容易抛语法上的异常，不建议使用

或var jsonobj=jsonArray[i]//赋值给jsonobj变量，对应的是第i个jsonArray值(可以是jsonarray或者jsonobject)
*/

遍历解析同（1）前端js解析前端json数据；

（3）javascript json对象转为json字符串

toJSONString()或者 JSON.stringify()，如由前端请求后端发送ajax请求data参数，

PS：

下面data数据是前端请求给后端的数据，async是否需要同步，success接收请求成功后的数据，存放data中

dataType是后端返回的数据格式：当JSON的话解析的时候就不用特意转成json对象了，直接使用var xxx=data.xxx接收就可以了，如果是Text的话，需要转成json对象如使用JSON.parse(data)转化一下；剩下的就是自己慢慢参考上面解析了。

$.ajax({

type: "POST",//请求方式

url: '/PostServlet',//指定的链接

data: JSON.stringify({//请求后端的参数

                 tokenID: Token,

                 schema: Schema,

                 funData: JSON.stringify({

                  func: 'doFunc',

                  params: param

             })

           }),

dataType: "JSON",//或"TEXT" //请求返回的数据类型
 async: false,  //是否需要同步
 success: function (data) { //请求返回成功后执行的function
     //后端返回json数据可以在这里，应用上面所说的解析json方法解析
    }

})