接口测试平台代码实现34:请求体

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

打开P_apis.html。接着在div调试弹层的里面加上一个ul ，用来放我们请求体的选择按钮组：

按钮一共有5个，其中一个是下拉单。

分别是None ，form-data,x-www-form-urlencoded,raw,返回体

其中raw自己带下拉单，包含：text ,javascript,json,html,xml

这些按钮。按照代码中写好后看看效果噢～纯纯的bootstrap3

代码语言：javascript复制

 <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：

还是给出源码：

代码语言：javascript复制

 <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。