【Ajax基础入门案例】基于jQuery封装的Ajax图书列表的增删查改

 一：源码获取

此文章是一个基于 jQuery 封装的 ajax 的获取提交请求的使用案例，使用了公共的测试接口，可以直接拿来使用学习联系，案例的源码如下，没有会员的同学可以私聊我“图书列表获取”

---

基于ajax的图书列表的增删改查-Javascript文档类资源-CSDN下载基于ajax的jQuery封装库的增删改查，入门ajax的首选案例更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/weixin_52212950/86807698

---

二：案例效果

本案例的基本功能为根据用户所输入的书名，作者名，出版社信息等来点击添加按钮后加入渲染到下方的图书列表中，并且点击删除按钮后可以将对应数据删除掉，这就是本案例的基本功能

---

三：源码分析

此板块分析数据增删改查操作的基本实现

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('')
                }
            })
        }
     })