Django接口新增页面编写_3十六（django 调用其他接口）

在完成了页面的布局之后，我们需要让页面动起来，一般来说头部信息需要添加好几个才能完成要求的接口请求。

所以我们在之前的基础要进行键值对输入的新增功能。

由于技术的原因，删除的操作没写出来。

所以最终实现了类似如下图的内容：

新增

把加号移动到了之前的操作位置，下面显示的是序列ID。所以会有诸多不便，但是删除指定行的操作还是等后续能力上升后再补全好了。

下面来看一下新增部分的js代码$("#head_data_add").click(function () {var tr = "<tr>" + '<td>' + flag + '</td>'+ '<td><input type="text" placeholder="请输入请求键" style="border-radius: 5px"></td>'+ '<td><input type="text" placeholder="请输入请求值" style="border-radius: 5px"></td>'+ '<td><input type="text" placeholder="请输入注释" style="border-radius: 5px"></td>'+ '</tr>';$("#head_data").append(tr);flag++;});

虽然就这么简单的几行，但是由于根本没有系统的学习过js，所以写的很痛苦。

首先是定义了一个变量tr，它是通过字符串的拼接组合而成，可以看到和我们在html静态页面中写的列表的一行内容一样，唯一不同的是使用flag来指明了序号。因为第一行是固定的，所以定义flag的时候是从2开始。在每次操作的最后都会进行flag++的操作，完成计数+1。

html页面

从IDE左侧的标示可以看出修改的部分。这次为table增加了一个id为head_data

为图标增加了一个a标签，并且指向的连接是javascript:void(0)

使用javascript:void(0)点击后html页面不会有任何变化，如果使用#会刷新一次页面。并且为它增加了一个id为head_data_add。

使用id是为了更方便的在js代码中定位到对应元素。

通过几步简单的操作就完成了添加一行键值对输入行的操作了。

效果

下面数据部分同理。

效果

其他部分自行查看github上的代码吧～～

https://github.com/zx490336534/Zxapitest

欢迎关注我的公众号：zx94_11