一:源码获取
此文章是一个基于 jQuery 封装的 ajax 的获取提交请求的使用案例,使用了公共的测试接口,可以直接拿来使用学习联系,案例的源码如下,没有会员的同学可以私聊我“图书列表获取”
二:案例效果
本案例的基本功能为根据用户所输入的书名,作者名,出版社信息等来点击添加按钮后加入渲染到下方的图书列表中,并且点击删除按钮后可以将对应数据删除掉,这就是本案例的基本功能
三:源码分析
此板块分析数据增删改查操作的基本实现
3.1 数据渲染
此处将数据的获取渲染封装到了一个函数中,因为后续的删除,添加等操作都需要重新渲染数据,我们获取数据发送 $.ajax 的type为GET的请求,具体的操作我们要根据接口文档的要求来实现,获取到的图书数据为 res.data ,通过jQuery封装的 $.each 方法遍历数据并将每一项添加到新的数组中。然后再转为字符串添加到页面表格的tbody中。
var getdata=()=>{
$.ajax({
type:'GET',
url:'http://www.liulongbin.top:3006/api/getbooks',
data:{},
success:(res)=>{
console.log(res);
if(res.status!=200){
return alert('数据获取失败')
}
var rowsarr=[]
$.each(res.data,(index,item)=>{
rowsarr.push('<tr><td>'+item.bookname+'</td><td>'+item.author+'</td><td>'+item.publisher+'</td><td><a href="javascript:;" class="del" dataid="'+ item.id +'">删除</a></td></tr>')
})
var rowsStr=rowsarr.join(' ');
console.log(rowsStr);
$('tbody').html(rowsStr)
}
})
}
3.2 数据删除
数据的删除需要用到数据添加时加上的自定义属性,这个属性的值为没个图书数据的id值,删除需要的数据为提供一个 id 数据,删除后重新渲染调用一次获取数据
$('tbody').on('click','.del',function(){
var id=$(this).attr('dataid')
// console.log(id);
$.ajax({
type:'GET',
url:'http://www.liulongbin.top:3006/api/delbook',
data:{
id:id
},
success:(res)=>{
if(res.status!=200){
return alert('数据删除失败')
}
getdata()
}
})
})
3.3 数据添加
$('.add-btn').on('click',function(){
var name_val=$('.name-ipt').val()
var author_val=$('.author-ipt').val()
var publisher_val=$('.publisher-ipt').val()
if(name_val.trim().length<=0||author_val.trim().length<=0||publisher_val.trim().length<=0){
return alert('请填写完整信息');
}else{
$.ajax({
type:'POST',
url:'http://www.liulongbin.top:3006/api/addbook',
data:{
bookname:name_val,
author:author_val,
publisher:publisher_val
},
success:(res)=>{
if(res.status!=201){
return alert('数据添加失败')
}
getdata()
$('.name-ipt').val('')
$('.author-ipt').val('')
$('.publisher-ipt').val('')
}
})
}
})