Ajax--图书列表案例渲染

渲染图书列表

删除功能，绑定一个单击事件，如果删除标签是后期添加进去的，就使用代理的模式

添加功能

    <script type="text/javascript">
            $(function(){
                //获取图书列表数据
                function getBoolList(){
                    $.get('http://www.baidu.top:3306/api/getbooks',function(res){
                        if(res.status!==200){
                        return alert("失败");
                        }
                        var rows=[];
                        $.each(res.data,function(i,item){
                            rows.push('<tr><td>'+item.id+'</td><td>'+item.bookname
                            +'</td><td>'+item.author+'</td><td>'+item.publisher
                            +'</td><td><a href="javascript:;">删除</a></td><tr>')
                        });
                        $('#tb').empty().append(rows.join(''))
                    })
                }
                getBoolList()
            })
            
            // 通过代理的方式为动态添加元素绑定点击事件
            $('tbody').on('click','.del',function(){
                var id=$(this).attr('data-id');
                $.get('http://www.baidu.top:3306/api/getbooks',{id:id},function(res){
                    if(res.status!==200){
                    return alert("删除失败");
                    }
                    getBoolList()
                })
            })
            
            
            //添加按钮id
            $("#btnAdd").on('click',function(){
                var bookname=$("#iptBook").val().trim();
                var author=$("#iptAuthor").val().trim();
                var publisher=$("#iptPublisher").val().trim();
                if(bookname.lenght<=0||author.lenght<=0||publisher.lenght<=0){
                    return alert('请填写完整的图书信息');
                }
                $.post('http://www.baidu.top:3306/api/getbooks',{bookname:bookname,author:author,publisher:publisher},function(res){
                    if(res.status!==201){
                    return alert("添加失败");
                    }
                    getBoolList()
                    $("#iptBook").val("")
                    $("#iptAuthor").val("")
                    $("#iptPublisher").val("")
                })
                
            })
        </script>