接口测试平台代码实现35:请求体
接上节课：
不知道跟上的同学有多少，本节最后会附上最新的项目压缩包
我们现在要开始开发form-data:表格，可增删，数据提取出来简单：
这里给大家 选好了一个现成的。地址：
http://down.htmleaf.com/1801/201801271505.zip
下载好后，解压，粘贴到你项目中的static文件夹下：
然后我们在P_apis.html中的 调试弹层div 里面的 下半部分大div 内的 form-data小div 内，写上以下代码：
代码的含义大家不用深究，毕竟是第三方的组件。能用好就可以了。
样式我稍微调过，大家可以直接复制代码：
<div class="table-responsive" style="width: 98%;color: black">
<table class="table table-bordered table-striped" id="mytable" style="background-color:white">
<thead style="color: #337ab7;font-size: x-small">
<tr>
<td style="width: 30%">Key</td>
<td style="width: 50%">Value</td>
</tr>
</thead>
<tbody>
<tr>
<td>Username</td>
<td>wqrf</td>
</tr>
<tr>
<td>Password</td>
<td>123456</td>
</tr>
</tbody>
</table>
</div>
<button class="btn btn-default" id="add"><i class="fa fa-plus"></i> 添加新参数</button>
<script>window.jQuery || document.write('<script src="/static/201801271505/js/jquery-1.11.0.min.js"><\/script>')</script>
<script type="text/javascript" src="/static/201801271505/js/bootstable.js"></script>
<script type="text/javascript">
$('#mytable').SetEditable({
$addButton: $('#add'),
});
</script>我修改了若干style的宽度和颜色，并且写好了静态资源js的位置路径。大家可直接复制使用。 但是要特别注意 最下面的哪个js ，
$('#mytable').SetEditable({
$addButton: $('#add'),
});这里面的 mytable就是我们这个表格的id, 里面的函数目前只有一个添加新参数的功能按钮函数，我们接下来就要手动添加编辑/删除功能了。
先看看页面效果：
我们可以简单测试一下 三个按钮的功能：
添加：
删除和编辑点击报错了，如果有报错。大家不要慌，这是第三方的代码里作者写了一个严格语法标记的问题，我们找到删除即可：
打开bootstable.js
你会看到顶部有一个字符串：use strict
我们删除这行。然后回去刷新页面再测试一下：
点击编辑按钮，那个小铅笔标志的，该行就进入到编辑状态，我们修改后，点击对号按钮，即可修改成功。
然后我们点击删除按钮 测试一下：
删除也成功了。
到这里，我们就算是成功写好了这个form-data的表格。
下节课 我们要用同样表格 解决x-www-form-urlencoded 。届时会触发一个报错，因为这个第三方组件，不支持同一个html内出现多个表格，会互相干扰。所以我们下一节课的主要内容是如何对其进行二次开发，使其可以支持多个表格。
最后附上本节课的项目压缩包：
链接: https://pan.baidu.com/s/1kbTNg88HGsr-3hwOvOt3AQ 密码: lrkd
腾讯云开发者
