ajax图书管理案例

JS部分：

 <script>
    $(function () {
      //获取图书列表
      function getBooks() {
        $.ajax({
          type: 'GET',
          url: 'http://liulongbin.top:3006/api/getbooks',
          data: {},
          success: function (res) {
            if (res.status !== 200) {
              return alert('失败！')
            } else {
              console.log(res);
            }

            var rows = []

            $.each(res.data, function (i, ele) {
              rows.push('<tr><td>' + ele.id + '</td><td>' + ele.bookname + '</td><td>' + ele.author + '</td><td>' + ele.publisher + '</td><td><a href="javascript:;" class="del" data-id="' + ele.id + '">删除</a></td></tr>');
              $('#tb').empty();
              $('#tb').append(rows.join(''))
            })
          }
        })
      }
      getBooks();

      // 删除图书
      $('#tb').on('click', '.del', function () {
        var id = $(this).attr('data-id')
        console.log(id);

        if (confirm('您真的要删除此图书吗？')) {
          $.ajax({
            type: 'GET',
            url: 'http://www.liulongbin.top:3006/api/delbook',
            data: 'id=' + id,
            success(res) {
              return alert(res.msg)
            }
          })
          getBooks();
        }
      })
    })


    // 添加图书
    $('#btnAdd').on('click', function () {
      var iptBookname = $('#iptBookname').val().trim();
      var iptAuthor = $('#iptAuthor').val().trim();
      var iptPublisher = $('#iptPublisher').val().trim();

      $.ajax({
        type: 'POST',
        url: 'http://liulongbin.top:3006/api/addbook',
        data: {
          bookname: iptBookname,
          author: iptAuthor,
          publisher: iptPublisher,
        },
        success(res) {
          alert(res.msg)
          $('input').val('');
        }

      })

    })

  </script>

完整下载：