打开我们的home.html,在下图位置新建一个script，记住，是script，并不是一个js函数，如果是js函数的话我们必须要调用才能触发，而我们直接把js代码写在外面，那就会一进入这个页面就会触发了。
我们先来处理请求体类型：
代码含义：先判断进来的这个api_method 是不是空的，如果不是，那么它的值一定是post/get/put/delete ,恰好符合我们这个请求方式select下拉框的value，所以直接赋值就可以实现。
然后继续：
(代码较多，大家复制即可)
<script> // 自动设置请求类型 if( "{{ log.api_method }}" != ''){ document.getElementById('ts_method').value = "{{ log.api_method }}"; } //请求体类型 //请求体 if("{{ log.body_method }}" != ''){ console.log("{{ log.body_method }}"); console.log("{{ log.api_body }}"); var body_method = '#'+"{{ log.body_method }}"; $("li a[href="+body_method+"]").click(); if("{{ log.body_method }}" == 'Text'){ document.getElementById('raw_Text').value = "{{ log.api_body }}"; } if("{{ log.body_method }}" == 'JavaScript'){ document.getElementById('raw_JavaScript').value = "{{ log.api_body }}"; } if("{{ log.body_method }}" == 'Json'){ document.getElementById('raw_Json').value = "{{ log.api_body }}"; } if("{{ log.body_method }}" == 'Html'){ document.getElementById('raw_Html').value = "{{ log.api_body }}"; } if("{{ log.body_method }}" == 'Xml'){ document.getElementById('raw_Xml').value = "{{ log.api_body }}"; } if("{{ log.body_method }}" == 'form-data'){ var tbody = document.getElementById('mytbody'); // 定位表格中的tbody部分 body = eval("{{ log.api_body }}"); //把这个像列表的字符串请求体变成真正的列表 for(var i=0;i<body.length;i++){ // 遍历这个请求体列表 key = body[i][0]; //拿出每一个键值对的key value = body[i][1];//拿出每一个键值对的value var childs_tr = tbody.children ;//获取到这个表格下面所有的tr组成的大列表 // 每个tr下的children得到的是 td列表，只有俩个。 childs_tr[i].children[0].innerText = key; //第一个td放key childs_tr[i].children[1].innerText = value;//第二个td放value //判断是否是最后一次遍历，来决定是否点击新增参数按钮 if(i<body.length-1){ document.getElementById('add').click() } } } if("{{ log.body_method }}" == 'x-www-form-urlencoded'){ var tbody = document.getElementById('mytbody2'); // 定位表格中的tbody部分 body = eval("{{ log.api_body }}"); //把这个像列表的字符串请求体变成真正的列表 for(var i=0;i<body.length;i++){ // 遍历这个请求体列表 key = body[i][0]; //拿出每一个键值对的key value = body[i][1];//拿出每一个键值对的value var childs_tr = tbody.children ;//获取到这个表格下面所有的tr组成的大列表 // 每个tr下的children得到的是 td列表，只有俩个。 childs_tr[i].children[0].innerText = key; //第一个td放key childs_tr[i].children[1].innerText = value;//第二个td放value //判断是否是最后一次遍历，来决定是否点击新增参数按钮 if(i<body.length-1){ document.getElementById('add2').click() } } } } </script>
好了我们现在可以刷新页面测试了
经过测试，发现除了form-data/x-www...之外的 记录都可以正常刷新并显示出来。
但是form-data这种类型却报错了。
看到原因，是我们的二维数组当中的 引号居然传过来就变成了" 这就是被转码了成为特殊字串了。
导致我们js的eval 无法解析报错。
在后台我们打印发现 并没有问题。
那么前端要怎么处理呢？其实有很多办法。
比如正则替换：把所有"都换成双引号。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配。
好了再试试，发现可以正常了。
好了本节基本结束。欢迎持续关注。作者会经常无意埋下一些坑，然后再讲解解决办法的时候引入新的小技巧。请别见怪！作者就是踩了无数个坑，然后埋上土爬出来 才走到今天的。希望大家理解。
首页明天才是最后一节课，会解决几个小bug，异常处理，还有稍微美化一下。（什么？开头不是说了本节就是最后一节了？不不不，仔细看我说的是基本是最后一节）
