接着上节的开发，我们还差一个请求体，等我们把核心功能开发后，会对交互进行优化。输入更加快捷。
打开P_apis.html。接着在div调试弹层 的里面 加上一个ul ，用来放我们请求体的选择按钮组：
按钮一共有5个，其中一个是下拉单。
分别是None ，form-data,x-www-form-urlencoded,raw,返回体
其中raw自己带下拉单，包含：text ,javascript,json,html,xml
这些按钮。按照代码中写好后看看效果噢～ 纯纯的bootstrap3
<br><br><br> <ul id="myTab" class="nav nav-tabs" > <li class="active"><a href="#None" data-toggle="tab" >None</a></li> <li ><a href="#form-data" data-toggle="tab" >form-data</a></li> <li ><a href="#x-www-form-urlencoded" data-toggle="tab" >x-www-form-urlencoded</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">raw <b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> <li><a href="#Text" tabindex="-1" data-toggle="tab">Text</a></li> <li><a href="#JavaScript" tabindex="-1" data-toggle="tab">JavaScript</a></li> <li><a href="#Json" tabindex="-1" data-toggle="tab">Json</a></li> <li><a href="#Html" tabindex="-1" data-toggle="tab">Html</a></li> <li><a href="#Xml" tabindex="-1" data-toggle="tab">Xml</a></li> </ul> </li> <li ><a href="#home" data-toggle="tab" >返回体</a></li> </ul>
效果如下：
整个调试窗体下半部分的大片空白，就是给这些按钮预备的，也就是一个公共区域，每个按钮都管领着自己的界面一个小div 但是一开始几乎都是隐藏的，你点击哪个按钮，下面就迅速切换到哪个div，同时隐藏其他div。
当然默认是第一个按钮None显示，并且下面空旷区域显示的也是None领导的小div。
那么 要怎么映射好 每个小div对应哪个按钮呢？
其实就是我刚刚写的那些按钮的中的 href属性，利用锚点技术，href=“#None” 那么你新建的小div 的id写成None ,即可让二者联系起来。
至于到底内部是怎么做的呢？其实都在于我们bootstrap3中，已经写好了，我们只需要给他们的class属性写对就可以了，所以大家在抄的时候一定不要写错字，最好复制下来。
这些小div 我们要放在一个大div里，才可以生效：具体代码如下：
在刚写的ul下方，加入这个大div和里面的小div：
还是给出源码：
<div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="None"> 进入了None </div> <div class="tab-pane fade" id="form-data"> 进入了form-data </div> <div class="tab-pane fade" id="x-www-form-urlencoded"> 进入了x-www-form-urlencoded </div> <div class="tab-pane fade" id="Text"> 进入了Text </div> <div class="tab-pane fade" id="JavaScript"> 进入了JavaScript </div> <div class="tab-pane fade" id="Json"> 进入了Json </div> <div class="tab-pane fade" id="Html"> 进入了Html </div> <div class="tab-pane fade" id="Xml"> 进入了Xml </div> </div>
目前每个小div中只包含一个文案，就是告诉你确实成功进入了哪个小div。
你发现只有第一个 id=None的小div的class 比别人多了 in active。
这就是默认显示
好看看效果：
好我们测试完毕后，没问题，接着就是要开始开发各个小div的内容了，得删掉之前写的小文案。换上其他东西：
首先是最简单的None : （不传任何请求体）
设计：当用户点击这个的时候，我们就给显示一句话：这个请求讲不会携带任何请求体。中英文混合！颜色不要太鲜艳！文案要居中！
效果如下：
好了，差不多了，我们开始设计form-data ：
按照postman的交互规则，这里要做成类似表格的样子，左边是key，右边是value，全部按照字符串格式。数量要可随时增加/删除。貌似难度较大。当遇到这种清空时候，我们可以有俩种办法：
- 土办法，用超大量的js代码 实现。
- bootstrap3找对应的表格，不过不支持增删，需要进行二次开发，难度更高
- 直接找支持增删的第三方组件。效果稳定，但是需要花成本试。
