JSON如何与服务器进行交换数据，详解

最新推荐文章于 2022-12-09 17:56:45 发布

CLFuture

最新推荐文章于 2022-12-09 17:56:45 发布

阅读量581

点赞数

分类专栏： Json 文章标签： Json

本文链接：https://blog.csdn.net/m0_37510446/article/details/89971497

版权

Json 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

主要有两个方法
JSON.parse()：
该方法通常用于JSON与服务端交换数据，
接收到的数据一般是字符串
接收到数据之后，要转换为JavaScript对象在前端进行处理，所以我们可以使用JSON.parse()方法将数据转换为JavaScript对象
JSON.parse(text(,reviver));
text必须，从服务端接收的有效的JSON字符串
reviver:可选，一个转换结果的函数，若定义该函数，那么对象中的每个成员都要公平调用此函数
下面我们就来见证，看看JSON是如何将字符串转换为我们所需要的JavaScript对象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<tittle>将JSON对象转换为JavaScript对象</tittle>
<p id="test"></p>
</head>
<body>
<script>
var  obj=JSON.parse('{"name":"baidu","url":"www.baidu.com"}');
document.getElementById("test").innerHTML=obj.name+":"+obj.url;
</script>
</body>
</html>

接下来模拟从服务端接收JSON数据，并解析为JavaScript对象
–使用Ajax来获取文件内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<tittle>使用AJAX获取服务端文件内容</tittle>
<p id="test"></p>
</head>
<body>
<script>
/*创建对象*/
var xmlhttp=new  XMLHttpRequest();
/*设置方法，也称设置监听*/
xmlhttp.onreadystatechange=function(){
/*4请求完成，200响应正常*/
if(this.readyState==4&&this.status==200){
/*此处response正是需要向页面输出的数据*/
obj=JSON.parse(this.responseText);
document.getElementById("test").innerHTML=obj.name+":"+obj.num;
}
};
/*设置请求并发送,三个参数，请求方式，请求地址，是否异步*/
xmlhttp.open("GET","/try/ajax/json_demo.txt",true);
xmlhttp.send();
</script>
<p>查看JSON文件的数据<a href="/try/ajax/json_demo.txt" target="_blank">json_demo</a></p>
</body>
</html>

当从服务器端接收到的是数组的JSON数据时，则JSON.parse会将其转换为JavaScript数组：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<tittle>使用AJAX获取服务端文件内容</tittle>
<p id="test"></p>
</head>
<body>
<script>
/*创建对象*/
var xmlhttp=new  XMLHttpRequest();
/*设置方法，也称设置监听*/
xmlhttp.onreadystatechange=function(){
/*4请求完成，200响应正常*/
if(this.readyState==4&&this.status==200){
/*此处response正是需要向页面输出的数据*/
obj=JSON.parse(this.responseText);
document.getElementById("test").innerHTML=obj[0];
}
};
/*设置请求并发送,三个参数，请求方式，请求地址，是否异步*/
xmlhttp.open("GET","/try/ajax/json_demo_array.txt",true);
xmlhttp.send();
</script>
<p>查看JSON文件的数据<a href="/try/ajax/json_demo_array.txt" target="_blank">json_demo_array</a></p>
</body>
</html>

异常情况：
JSON不能存储Date对象，当我们需要存储Date对象，需要将其转换为JavaScript对象，然后再转换为Date对象,
如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<tittle>将字符串转换为Date对象</tittle>
<p id="test"></p>
</head>
<body>
<script>
var text='{"Date":"today","initDate":"2019-05-05","site":"www.baidu.com"}';
var obj=JSON.parse(text);
obj.initDate=new Date(obj.initDate);
document.getElementById("test").innerHTML=obj.Date+"日期"+obj.initDate;
</script>
</body>
</html>

前面讲解了那么多关于JSON.parse这个方法，接下来就讲解一下另外一个刚好相反的方法，JSON.stringify(),同样是用于与服务端交互数据，但是该方法是向服务端发送数据，由于在向服务端发送数据时，一般是字符串，所以我们可以使用JSON.stringify()方法将JavaScript对象转换为字符串，
方法：JSON.stringify(value[,replace[,space]])
解析：
value:所需要进行转换的JavaScript值，必须
replace：可选，用于转换结果的函数，
若replace为函数，那么JSON.stringify将会调用该函数，并传入每个成员的键和值，使用返回值而不是原始值，若该函数返回undefined，那么就会将该成员排除，
若replace是一个数组，那么就会只转换该数组中的键值对成员，且成员的转换顺序与键在数组中的顺序是一样的，当value参数也为数组时，将忽略replace数组

<!DOCTYPE　html>
<html>
<meta charset="utf-8"/>
<title>将JavaScript对象转换为JSON对象</title>
<h1 id="test"></h1>
</html>
<body>
<script>
var  obj={"id":123,"name":"xxx","addr":"hubei"};
var  job=JSON.stringify(obj);
/*这里经过JOSN.stringify之后，该对象就被换为字符串了，所以这里可以直接输出，将该数据输出到服务器之后，返回时，又将对应的字符串通过JSON.parse将其转换为JavaScript对象，所以称JSON是JavaScript的一种对象表示法*/
document.getElementById("test").innerHTML=job;
</script>
</body>
</html>

若JavaScript为数组，那么我们就将其转换JSON对象–和JavaScript为对象时，处理方式一致，都是将JavaScript对象作为value参数

<!DOCTYPE　html>
<html>
<head>
<title>将JavaScript数组对象转换为JSON对象</title>
<h1 id="test"></h1>
</head>
<body>
<script>
var arr=["baidu","tianmao","jingdong","rapper"];
var json=JSON.stringify(arr);
document.getElementById("test").innerHTML=json;
</script>
</body>
</html>

和刚才JSON.parse()方法类似，其都不能直接包含Date，这里就要先将Date转换为字符串,处理方式一致，都是将JavaScript对象作为value参数

<!DOCTYPE　html>
<html>
<head>
<title>将Date对象转换为字符串</title>
<h1 id="test"></h1>
</head>
<body>
<script>
var arr={"id":123,"initDate":new Date()};
var json=JSON.stringify(arr);
document.getElementById("test").innerHTML=json;
</script>
</body>
</html>

同时需要注意的点：JOSN.stringify不支持包含函数，若value中存在函数，那么会直接将其删除,如下结果中，只会显示{“id”:124}

<!DOCTYPE　html>
<html>
<head>
<title>将Date对象转换为字符串</title>
<h1 id="test"></h1>
</head>
<body>
<script>
var arr={"id":123,"exam":function(){return 134}};
var json=JSON.stringify(arr);
document.getElementById("test").innerHTML=json;
</script>
</body>
</html>

但是如果有时候我们需要函数，所以说，我们有些时候，肯定是需要的，我们也肯定会有办法，办法就是先将该函数转换为字符串，然后再将其赋给JSON.stringify（），这样就可以将函数赋给JSON了，不得不说，程序员真的很厉害，总有办法

<!DOCTYPE　html>
<html>
<head>
<title>将Date对象转换为字符串</title>
<h1 id="test"></h1>
</head>
<body>
<script>
var arr={"id":123,"exam":function(){return 134}};
arr.exam=arr.exam.toString();
var json=JSON.stringify(arr);
document.getElementById("test").innerHTML=json;
</script>
</body>
</html>