接口测试平台-32：请求体1

打开P_apis.html

 

1. 请求体选择按钮组

接着在div调试弹层 的里面 加上一个ul ，用来放我们请求体的选择按钮组： 按钮一共有5个，其中一个是下拉单。

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

其中raw自己带下拉单，包含：text、javascript、json、html、xml这些按钮。

 

代码实现：

<!--    body请求体    -->
<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属性写对就可以了，所以大家在抄的时候一定不要写错字，最好复制下来。

 

2. 这些小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>

具体底层实现，在bootstrap3中写好了，只需要给class属性写对就可以了

效果如下：

 

只有第一个 id=None的小div的class 比其他多了 in active，这就是默认显示

 

3. 实现各个小div的内容，首先是最简单的None : （不传任何请求体）

设计：点击这个时，就给显示一句话：这个请求讲不会携带任何请求体。中英文混合！颜色不要太鲜艳！文案要居中

<!--      none      -->
<div class="tab-pane fade in active" id="none" style="text-align: center; color: grey">
    <h3>这个请求将不会携带任何请求体！</h3>
    <h5>This request will not carry any request-body!</h5>
</div>

效果如下：

 

4. 开始设计form-data

按照postman的交互规则，这里要做成类似表格的样子，左边是key，右边是value，全部按照字符串格式。

数量要可随时增加/删除。当遇到这种清空时候，可以有三种办法：

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

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

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

这里选择第三种，直接找现成的。不过具体内容要放在下节课了。