接口测试平台-40：各个请求体自动显示

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

 

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

不同的展示窗口，显示的不一样，主要分俩类：raw的五种子选项的多行文本框的显示效果，form-data和x-www…的表格类显示

 

1. raw的五种子选项的多行文本框的显示效果。

 

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

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

所以步骤为：

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…，注意其中几个修改的地方：

效果如下：