本节主要是用来在用户打开调试弹层后,能自动显示弹层的接口请求体的功能。
本节之后,将会进行数节的 接口后台实际请求的代码实现。
打开P_apis.html:找到我们上节没写完的那个打开显示的函数:
首先我们记得,不同的展示窗口,显示的不一样,主要分俩类:
一类是:
form-data和x-www....的表格类显示。
另一类是raw的五种子选项的多行文本框的显示效果。
很明显,第二类要简单很多, 所以我们先从第二类入手,迅速解决掉这五个多行本文框的显示,再集中精力对付较难的第一类表格显示。
如上图五种,用五个if判断搞定了这个显示效果。有同学可能会说,其实这五种一开始不用5个多行文本框,用一个就可以了,5个的话很麻烦。这里的话其实也是可以的。但是后续的话可能要少一点灵活性。不过这里全凭大家自选哈。就算现在这种五个输入框,也都是写好一个,直接复制粘贴成5个。也没啥太多成本。
到这为止。我们还剩下俩个编码格式:form-data和x-www....
写好一个,另一个基本就是复制改改。
如下图,是form-data的显示代码:
在正式写之前,我们要思考下这里要如何填充好呢?作者看了下第三方这个表格,并没有自动填充的方法,只能我们手动拼接了看来。
所以步骤为:
好了,看下代码:
可复制代码如下:
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中的各种括号,千万不要写错了。之前很多反馈报错的小伙伴都是这种问题。一定要细心一点奥~。