打开P_apis.html：找到我们上节没写完的那个打开显示的函数
首先我们记得，不同的展示窗口，显示的不一样，主要分俩类：
一类是：
form-data和x-www....的表格类显示。
另一类是raw的五种子选项的多行文本框的显示效果。
很明显，第二类要简单很多， 所以我们先从第二类入手，迅速解决掉这五个多行本文框的显示，再集中精力对付较难的第一类表格显示。
如上图五种，用五个if判断搞定了这个显示效果。有同学可能会说，其实这五种一开始不用5个多行文本框，用一个就可以了，5个的话很麻烦。这里的话其实也是可以的。但是后续的话可能要少一点灵活性。不过这里全凭大家自选哈。就算现在这种五个输入框，也都是写好一个，直接复制粘贴成5个。也没啥太多成本。
到这为止。我们还剩下俩个编码格式：form-data和x-www....
写好一个，另一个基本就是复制改改。
如下图，是form-data的显示代码：
在正式写之前，我们要思考下这里要如何填充好呢？作者看了下第三方这个表格，并没有自动填充的方法，只能我们手动拼接了看来。
所以步骤为：
- 给这个表格进行初始化，清除掉旧数据。（不然的话，你每次切换到这里这里搞不好数据会重复累加显示），但是因我们在整个显示函数中的一开始就触发了clear清除函数，所以这步我就不用再写了。
- 拿到请求体列表，作为循环主体
- 遍历这个请求体列表，获取每一对key-value，然后我们获取表格的所有子标签，也就是获取到一堆tr，和tr内部的一对td。
- 然后tr的下标就是我们遍历这个循环的下标，td应该只有2个，第一个放key，第二个放value，我们对其分别赋值，值就是从这个请求体列表拿到的。
- 最后我们别忘了代码要点击一下这个表格的新增参数按钮。不然下一对key-value你就没地方放了，因为这个第三方表格我们设定一开始就带一行空的。所以顺序就是先填key-value，再新增空行。不要担心空行最后多出来，我们可以在最后一次遍历的时候结尾不点击新增参数按钮，即便我们点击了。我们的保存函数也可以过滤掉空行不保存。
好了，看下代码：
可复制代码如下：
if(ret.body_method == 'form-data'){ var tbody = document.getElementById('mytbody'); // 定位表格中的tbody部分 body = eval(ret.api_body); //把这个像列表的字符串请求体变成真正的列表 for(var i=0;i<body.length;i++){ // 遍历这个请求体列表 key = body[i][0]; //拿出每一个键值对的key value = body[i][1];//拿出每一个键值对的value var childs_tr = tbody.children ;//获取到这个表格下面所有的tr组成的大列表 // 每个tr下的children得到的是 td列表，只有俩个。 childs_tr[i].children[0].innerText = key; //第一个td放key childs_tr[i].children[1].innerText = value;//第二个td放value //判断是否是最后一次遍历，来决定是否点击新增参数按钮 if(i<body.length-1){ document.getElementById('add').click() } } }
可以看到，已经可以默认显示成功了。
接下来再如法炮制，去写x-www....，注意其中几个修改的地方：
然后我们再次刷新页面，看看效果：
好了，到这里，我们就可以进行完整的保存显示 测试了。各个编码格式大家都可以试一下,确保全部正常后，本节即可结束。
