JSON.parse()和JSON.stringify() 交换数据

最新推荐文章于 2024-04-04 14:45:00 发布

仙鹤__

最新推荐文章于 2024-04-04 14:45:00 发布

阅读量214

点赞数

文章标签： json 前端

本文链接：https://blog.csdn.net/weixin_52629158/article/details/130478145

版权

文章详细阐述了在Web开发中如何使用JSON.parse()和JSON.stringify()处理数据。当从服务器接收数据时，通常以JSON字符串形式，通过JSON.parse()转换为JavaScript对象。而向服务器发送数据时，JavaScript对象需经JSON.stringify()转化为字符串。文中还展示了AJAX请求示例，以及PHP如何接收和处理这些数据。

摘要由CSDN通过智能技术生成

交换数据：当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。

1.1 JSON.parse() 处理的是从服务器接收到的数据

JSON 通常用于与服务端交换数据。

在接收服务器数据时一般是字符串。

我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

JSON.parse() 就是将JSON字符串解析成字符串描述的JavaScript值或对象。

语法

JSON.parse(text[, reviver])

参数说明：

text:必需，一个有效的 JSON 字符串。
reviver: 可选，一个转换结果的函数，将为对象的每个成员调用此函数。

我们从服务器接收了以下数据：

<button id="btn">发送异步请求，服务端数据</button>
    <script src="./js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            $('#btn').click(function(){
                //接口地址
                var apiUrl='http://localhost/3.php'
                $.ajax({
                    url:apiUrl,
                    type:'get',
                    dataType:'json',
                    success:function(data){
                        console.log(data,typeof data);
                        //将对象转字符串
                        console.log(JSON.stringify(data),typeof JSON.stringify(data));
                        // var result=JSON.parse(JSON.stringify(data))
                        // console.log(result,typeof result);
                        // console.log(result.b);
                    }
                })
            })
        })
    </script>

预览：

1.1.1 从服务端接收 JSON 数据

我们可以使用 AJAX 从服务器请求 JSON 数据，并解析为 JavaScript 对象。

<?php

$arr=array("a"=>1,"b"=>2,"c"=>3,"d"=>4,"e"=>5);
echo json_encode($arr);

?>

1.1.2 从服务端接收 JSON 数据

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

1.2 JSON.stringify() 处理的是向服务器发送的数据

JSON 通常用于与服务端交换数据。

在向服务器发送数据时一般是字符串。

我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

JSON.stringfy()是 JSON.parse()的反义，就是将一个JavaScript值(对象或者数组)转换为一个JSON字符串。

语法

JSON.stringify(value[, replacer[, space]])

参数说明：

value:

必需，要转换的 JavaScript 值（通常为对象或数组）。
replacer:

可选。用于转换结果的函数或数组。

如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。

如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。
space:

可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

我们向服务器发送以下数据：

<?php
header("content-type:text/html;charset=utf-8");
//php接收数据
$x=$_GET['x'];
echo "<pre>";
print_r($x);
echo "</pre>";

$p = json_decode($x,TRUE);
echo "<pre>";
print_r($p);
echo "</pre>";
?>

<button id="btn">发送异步请求，服务端数据</button>
    <script src="./js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            $('#btn').click(function(){
                //js对象
                var o={name:'xy'}
                //转化为字符串
                var myjson=JSON.stringify(o)
                console.log(myjson,typeof myjson);
                //接口地址
                var apiUrl='http://localhost/4.php?x='+myjson
                $.get(apiUrl)
            })
        })
    </script>

预览：