接着上节的开发，我们还差一个请求体，等我们把核心功能开发后，会对交互进行优化。输入更加快捷。

    打开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，全部按照字符串格式。数量要可随时增加/删除。貌似难度较大。当遇到这种清空时候，我们可以有俩种办法：

1. 土办法，用超大量的js代码 实现。

2. bootstrap3找对应的表格，不过不支持增删，需要进行二次开发，难度更高

3. 直接找支持增删的第三方组件。效果稳定，但是需要花成本试。

我们选择第三种，直接找现成的，作者已经从数个方法中找到了最好的，免去了大家的烦恼。

    不过具体内容要放在下节课了。欢迎持续关注哦～