接口测试平台代码实现38: 请求体保存-end

上节我们已经成功保存了none 和 form-date 俩种请求体。

本节课我们处理完剩余请求体，内容较多。因为是直播撸码，所以难免会有一些不完美的地方。大家自行优化。

打开P_apis.html发现目前还有这么多空着的：

我们一个一个处理：

首先是 x-www-form-urlencoded ：

它的提取和保存应该和form-data一样，所以复制即可，但是要注意把mytable改成mytable2

然后剩下的就是raw字符串五兄弟了：我们的保存方式实际上一摸一样，但是具体的多行文本框并不是一个。

但是要先给这5个多行文本框加上id：

然后js函数中：

搞定了 这个之后。我们在这个大js函数ts_save()的最后要写好http请求了，来把这些数据发给我们的后台让其保存成功。

但是这里我们遇到了一个问题，就是我们请求中，目前还没有获取到接口id，也就是后台也不知道你要保存/修改的是哪个接口。

所以我们要先把打开这个调试弹层的js函数写好。让用户点击接口的调试按钮的时候，把id传给调试弹层，并显示在调试弹层的顶部标题small里，然后再点击保存按钮的时候，我们从这个顶部标题small里拿出api_id给ts_save函数用即可。

也就是这俩个small，前面的放api_id，后面的放接口名。为了api_id的small后续提取api_id，所以要给这个small加上id来定位。

所以我们先新建一个ts_show函数来打开调试弹层

并且把调试弹层的div 的style属性中的display改成none，让其默认是隐藏状态：

然后我们开发ts_show函数，让用户点击时候可以打开调试弹层，并且把接口id 名字都显示在弹层顶部标题的俩个small标签里：

所以这个ts_show函数要接收接口id和name作为入参：

然后我们去写接口html中的调试按钮，让其的onclick属性=ts_show：

然后我们刷新页面 测试一下 发现可以成功打开调试弹层，并且正确显示接口id-name:

当然这个颜色非常暗，所以我们给颜色改成明显一点的：

效果如下：

好了，本节课就到此结束，能继续追的小伙伴一定要坚持住，当然可以养肥再看。