接口测试平台代码实现36:请求体继续

本节我们先搞定x-www-form-urlencoded的前端交互：

首先复制我们form-data的小div的内容 到 x-www-form-urlencoded 的小div里：

复制好后，我们要改下里面的几个地方：

把mytable 改成 mytable2

把 add 改成add2

经过上述改动后来完全分开俩个表格。

我们刷新页面看看效果：

测试一下form-data 和 x-www-form-urlencoded 自己的小div下的表格是否会互相影响，应该确保都完全是独立的才算成功。

如我这的效果。俩个表格可以设置出不同的参数数量和内容。

好，我们接下来开始搞raw

这个raw，大家应该可以看得出来，就是个大字符串。但是这个字符串具体是什么格式呢？就要通过里面的5个子选项来决定了。

也就是 text ,javascript,json,html,xml。

他们的区别在于发送请求的时候的请求体中的content-type不同，后台服务器根据这个参数来判断 这一大坨字符串 是个什么东西，然后来解析。

这里我们为了后续避免出现数据传输错误，统一严格规定，前面的大编码格式分类全部小写：none,form-data,x-www-form-urlencoded,raw 。

raw下面的5个子选项全部驼峰规则：

Text,JavaScript,Json,Html,Xml

这样可以避免我们后续因为大小写出现的错误，相信我，这里太容易出问题了。我们看到之前设计中的None格式并没有完全小写，所以我们这里立即更改成小写。一共三处，大家仔细一点找出来 改正：

按照我们上面定的规则，之后写的时候一定严格遵守。

好开始正式设计这raw了：

raw就是一个大字符串，所以我们最简单的办法就是弄多行文本框放这里。

我们先写好一个文本框，调好css属性，然后直接复制到其他四个子选项即可

看看效果：

这里我们发现一个问题哈，就是这个多行文本框的高度 貌似不能很好的适应，我们发现在写这个调试弹层的时候的高度是基于浏览器高度的百分比，也就是实时变动的，但是这个文本框写死高度肯定是不好了，写百分比呢？发现无效，那是因为百分比高度/宽度，都必须要其父级标签有明确的高度，我们发现这个文本框的父级，爷爷级，太爷爷级都没有高度设置，所以这个办法貌似太麻烦了。

那么我们有没有更好的办法呢？

可以试试这个：

直接删除我们的调试弹层的 高度设置！

删除之后，发现 这次变的彻底完美了。

包括之前的几个编码div的时候的不协调都好了！

最好在最后再加个br换行撑一撑底部空间：

看看效果：

总的来说，弹层的高度 只要我们不具体设置写死，那么就会根据内部的元素自动变化。既不浪费空间，也不会出现溢出。

好，接下来我们迅速复制这个textarea多行本文框到其他四个子项里。注意这时候我还是没有对各个textarea写id属性，这个留到之后写js函数的时候再补即可。

复制完成后。我们的raw就算完成了。

最后我们再快速做一个返回体显示窗口。

返回体我们还没有加它的小div,这就给它加上.

看看效果：

然后我们的返回体呢 应该也是个巨大的textarea，基本复制刚刚的raw下面的就可以。只不过返回体我们不让用户进行编辑，所以复制完后，我们加上disabled的属性即可，而且后续返回体的交互会有其他特有功能，比如自动json格式化/xml格式化,请求成功/失败的文案颜色 等等特殊反馈。

css颜色效果大家随意一点。

正常用户调试的流程就是输入好各种参数后，点击Send按钮，然后平台发送请求，之后自动跳转到返回体这个子页面并显示返回体。用户根据返回体是否成功来决定是否保存接口。

好了，下一节课我们开始开发后台函数。

欢迎大家继续坚持，坚持就是胜利！