这次使用 js模板引擎: art-template,大大简化苦逼后端程序员的前端工作内容
只需要在项目 js包中放入 template-web.js 即可使用
链接:https://pan.baidu.com/s/11XXjuIN1MxSYbjOYmv3gKg 提取码:sw3i
后台返回的 json数据格式如左图
一. 首先,在页面加入
<script src="assets/js/template-web.js"></script>
二. 显示页面
将需要循环的内容用 <script type="text/template" id="temp1"> 包裹,注意,必须设置一个 id ,在后续js方法中会使用。
其上一层,例如 <tbody id="change"> 也需设置 id
json数据中,需要遍历的对象数组,在下方 each 中名为 datalist ,后续 js 方法中会取出 json中的 data 数组命名为datalist
其中, {{$index}} 为自动生成的 索引 ,value为数组中的对象
<table>
<tbody id="change">
<script type="text/template" id="temp1">
{{each datalist}}
<tr id='{{$index}}'>
<td>{{$value.rid}}</td>
<td>{{$value.name}}</td>
<td>{{$value.workplace}}</td>
<td>{{$value.job}}</td>
<button onclick="deleteItem('{{$value.rid}}','{{$index}}')"></button>
</tr>
{{/each}}
</script>
</tbody>
</table>
三. 开始写 ajax 获取 后台返回的 json数据,并显示到 上方的页面中
2.其中,从 返回的 json数据 res 中,取出 名为res.data的对象数组,命名为 datalist
3.然后,创建 名为 data 的对象,
4.并 利用 datalist : datalist , 将 datalist 数组放入其中,命名为 datalist
5.然后, var html = template('temp1', data) ,根据 id 找到 标题 二 中 代码里的 <script>,并放入 data
6.最后,document.getElementById('change').innerHTML = html;
通过 id : change 在 标题 二 中 代码 中 找到 <tbody> ,再 插入 6 中获取 的 html
<script>
var datalist=[]; //数据给该数组,方便遍历和删除操作
function querylist() {
$.ajax({
type:'GET',
dataType: "json",
url:"../people/list",
// data:{
// msg: "给我来个数据", //可设置发送的数据
// age: "18",
// name: "老爷爷"
// },
success:function(res){
if (res.code == 0) {
alert("获取成功");
datalist = res.data;
var data={
datalist:datalist
};
var html = template('temp1', data);
document.getElementById('change').innerHTML = html;
}else {
alert("获取成功")
}
},
error:function(){
alert("获取失败");
}
});
}
</script>
四. 点击删除单行数据,并通过ajax传递给后台.
删除 标题 四 代码中的 js 方法外 datalist 数组中的元素,页面就会变化。
故后台无需返回 具体数据,只返回 code 即可
1. 如图 在 该 js方法所获取的 id 和 index,可在 标题一中,每条数据后的按钮提供
<button οnclick="deleteItem('{{$value.rid}}','{{$index}}')"></button>
传入 待删除对象的id属性,和该条数据的索引 index ,并将 index 转为 int 型
将 id 传给后台,返回的 json数据,判断当 res.code == 0 时,直接 通过 索引 ,删除 datalist 数组中的元素。
<script>
function deleteItem(id,index) {
var key = parseInt(index);//数组索引
$.ajax({
type:'POST',
dataType: "json",
url:"../people/delete_item",
data:{
id: id
},
success:function(res){
if (res.code == 0) {
alert("删除成功");
datalist.splice(key, 1);//从索引key开始,删 1 个元素
var data={
datalist:datalist
};
var html = template('temp1', data);
document.getElementById('change').innerHTML = html;
}else {
alert("删除失败")
}
},
error:function(){
alert("删除失败");
}
});
}
</script>
至此结束,大概某一天,苦逼的我也会成为前端工程师。。。。