我们上节成功做出了首页左上角的个人项目列表。它有几个功能：
- 显示备注 2.显示其他管理员 3.立即进入，4.保存右侧请求到接口库。
其中1，2，3 我们已经成功完成。本节我们把4 保存右侧请求到接口库功能做了吧。
打开Home.html，我们找到这个保存请求的按钮，给它写了一个onclick函数。注意，需要传入项目id
然后我们在下面找个地加上这个js函数：
现在我们要考虑下这个函数要做的是什么事了...
首先要提取页面右侧的请求体，然后和项目id，一起传给后端，完毕后弹出个提示成功即可。
这里去获取页面各个复杂的输入框的内容的代码我们可以直接复制这个首页当时发送请求的js函数，因为发送请求也是需要获取页面的请求数据的。
最终代码如下：
代码语言：javascript复制<script>
function save_api(id) {
// 获取接口的所有数据
var ts_method = document.getElementById('ts_method').value ;
var ts_url = document.getElementById('ts_url').value ;
var ts_host = document.getElementById('ts_host').value ;
var ts_header = document.getElementById('ts_header').value ;
// 判断顶部的数据是否填充完
if(ts_method == 'none'){alert('请选择请求方式！');return}
if(ts_url == ''){alert('请输入url！');return}
if(ts_host == ''){alert('请输入host！');return}
//判断关键数据是否符合规则
if(ts_host.slice(0,7) != 'http://' && ts_host.slice(0,8) != 'https://'){
alert('host必须以http://或https://开头！');return
}
if(ts_header != ''){
try {
JSON.parse(ts_header)
}catch (e) {
alert('header请求头不符合json规范！');
return
}
}
var ts_body_method = $('ul#myTab li[class="active"]')[0].innerText;
if(ts_body_method == 'none'){
var ts_api_body = ''
}
if(ts_body_method == 'form-data'){
var ts_api_body = []; //新建这个空列表用来存放后续的数据
var tbody_ = $("table#mytable tbody")[0]; //获取该表格的内容部分
var trlist = tbody_.children ; //获取下面所有tr，每个tr就是一个键值对实际上
for(var i=0;i<trlist.length;i ) {
var tdarr = trlist[i].children; // 获取tr下的俩个td
var key = tdarr[0].innerText; // 获取key
var value = tdarr[1].innerText; // 获取value
ts_api_body.push([key, value]);// 作为一个数组，存放到这个大数组里。
}
ts_api_body = JSON.stringify(ts_api_body);
}
if(ts_body_method == 'x-www-form-urlencoded'){
var ts_api_body = []; //新建这个空列表用来存放后续的数据
var tbody_ = $("table#mytable2 tbody")[0]; //获取该表格的内容部分
var trlist = tbody_.children ; //获取下面所有tr，每个tr就是一个键值对实际上
for(var i=0;i<trlist.length;i ) {
var tdarr = trlist[i].children; // 获取tr下的俩个td
var key = tdarr[0].innerText; // 获取key
var value = tdarr[1].innerText; // 获取value
ts_api_body.push([key, value]);// 作为一个数组，存放到这个大数组里。
}
ts_api_body = JSON.stringify(ts_api_body);
}
if(ts_body_method == 'Text'){
var ts_api_body = document.getElementById('raw_Text').value;
}
if(ts_body_method == 'JavaScript'){
var ts_api_body = document.getElementById('raw_JavaScript').value;
}
if(ts_body_method == 'Json'){
var ts_api_body = document.getElementById('raw_Json').value;
}
if(ts_body_method == 'Html'){
var ts_api_body = document.getElementById('raw_Html').value;
}
if(ts_body_method == 'Xml'){
var ts_api_body = document.getElementById('raw_Xml').value;
}
if(ts_body_method == 'GraphQL'){
body_plan_G_Q = document.getElementById('body_plan_G_Q').value;
body_plan_G_G = document.getElementById('body_plan_G_G').value;
var ts_api_body = body_plan_G_Q '*WQRF*' body_plan_G_G
}
// 发送请求给后台
$.get('/Home_save_api/',{
'ts_method':ts_method,
'ts_url':ts_url,
'ts_host':ts_host,
'ts_header':ts_header,
'ts_body_method':ts_body_method,
'ts_api_body':ts_api_body,
},function (ret) {
alert('保存成功！')
})
}
</script>大家不要太纠结代码内容。这里没什么新知识点。
下节我们来实现这里后端的相关逻辑，然后还有主页的另一个模块，个人任务状态。
