记录昨天遇到的一个需求，需要编写一个接口查询页面，用户将JSON格式数据作为入参复制在文本域中，需要提取成JSON格式提交给后台，后台返回的JSON要正常显示在页面上。

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串

简单地说，JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串，然后就可以在网络或者程序之间轻松地传递这个字符串，并在需要的时候将它还原为各编程语言所支持的数据格式。

JSON复制到文本域提取出入参

言归正传，复制到文本域的JSON数据示例如下

1
2
3
4
{
    "userName": "yao",
    "passWord": "218378"
 }

复制到文本域中，数据会变成字符串格式，且具有空格和换行字符，需要清理掉这些无用字符

1
2
data = this.jsonData.split("\n").join(""); //将所有换行字符去掉
data = data.replace(/\s*/g,"");  //替换字符串中所有的空字符串

后台JSON返回显示在页面

使用pre标签将数据原格式按原样显示

1
<pre id="returnJson"></pre>
1
2
3
4
5
6
//返回数据样式
let returnJson =[{
                    retcode:'0000',
                    retmsg: 'ok'
                }],
$("#returnJson").text(returnJson,null,2));

页面效果：

image-20210630111022835