接口测试平台代码实现42:各个请求体自动显示

本节主要是用来在用户打开调试弹层后，能自动显示弹层的接口请求体的功能。

本节之后，将会进行数节的 接口后台实际请求的代码实现。

打开P_apis.html：找到我们上节没写完的那个打开显示的函数：

首先我们记得，不同的展示窗口，显示的不一样，主要分俩类：

一类是：

form-data和x-www....的表格类显示。

另一类是raw的五种子选项的多行文本框的显示效果。

很明显，第二类要简单很多， 所以我们先从第二类入手，迅速解决掉这五个多行本文框的显示，再集中精力对付较难的第一类表格显示。

如上图五种，用五个if判断搞定了这个显示效果。有同学可能会说，其实这五种一开始不用5个多行文本框，用一个就可以了，5个的话很麻烦。这里的话其实也是可以的。但是后续的话可能要少一点灵活性。不过这里全凭大家自选哈。就算现在这种五个输入框，也都是写好一个，直接复制粘贴成5个。也没啥太多成本。

到这为止。我们还剩下俩个编码格式：form-data和x-www....

写好一个，另一个基本就是复制改改。

如下图，是form-data的显示代码：

在正式写之前，我们要思考下这里要如何填充好呢？作者看了下第三方这个表格，并没有自动填充的方法，只能我们手动拼接了看来。

所以步骤为：

1. 给这个表格进行初始化，清除掉旧数据。（不然的话，你每次切换到这里这里搞不好数据会重复累加显示），但是因我们在整个显示函数中的一开始就触发了clear清除函数，所以这步我就不用再写了。
2. 拿到请求体列表，作为循环主体
3. 遍历这个请求体列表，获取每一对key-value，然后我们获取表格的所有子标签，也就是获取到一堆tr，和tr内部的一对td。
4. 然后tr的下标就是我们遍历这个循环的下标，td应该只有2个，第一个放key，第二个放value，我们对其分别赋值，值就是从这个请求体列表拿到的。
5. 最后我们别忘了代码要点击一下这个表格的新增参数按钮。不然下一对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....，注意其中几个修改的地方：

然后我们再次刷新页面，看看效果：

好了，到这里，我们就可以进行完整的保存显示 测试了。各个编码格式大家都可以试一下,确保全部正常后，本节即可结束。

注意js中的各种括号，千万不要写错了。之前很多反馈报错的小伙伴都是这种问题。一定要细心一点奥～。