使用Ajax和axios库实现增删查改

Ajax是浏览器中的技术，它主要用来实现客户端网页请求服务器数据。因为jQuery已经过时，所以这里选择使用axios库实现ajax的请求。

一、Ajax请求数据的5种方式：

• POST：向服务器新增数据
• GET：从服务器获取数据
• DELETE：删除服务器上的数据
• PUT：更新服务器上的数据（侧重于完整更新）
• PATCH：更新服务器上的数据（侧重于部分更新）

二、Ajax常用的增删查改：

• GET(查)：

  axios({
    method:'get',
    url:'http://接口路径',
    
    //查询参数，另外get方法处理可以使用params获取参数外，也可以
    //使用？属性=值的方式拼接在上面URL路径的末尾。
    params:{
      id:1,
      username:'jack'
    }
  }).then((result)=>{
    console.log(result)
  })
  

• POST(增)：

  axios({
    method:'post',
    url:'http://接口路径',
    
    //注意post的请求提交数据用data
    data:{
      username:'jack',
      age:18
    }
  }).then((result)=>{
    console.log(result)
  })
  

• DELETE(删)：

  删除功能注意要根据唯一值id来进行请求删除，渲染页面的时候将id值储存到删除按钮的自定义属性data-id中。

   //动态生成的元素事件绑定一定要使用事件委托！！！！！
  tbody.addEventListener('click', function (e) {
        if (e.target.classList.contains('del')) {
          let id = e.target.dataset.id
          axios({
            url: 'http://接口路径',
            method: 'delete',
            params: {
              id
            }
          }).then(result => {  //此处result使用了简写，去掉了小括号
            //判断是否请求成功
            if (result.data.status == 0) {
              alert(result.data.message)
              //删除成功后调用封装的渲染函数重新渲染更新页面数据
              init()
            } else {
              alert('delete fail')
            }
          })
        }
      })
  

• PUT(改)：

      confirm.addEventListener('click', function () {
        axios({
          url: 'http://接口路径',
          method: 'put',
          data: {
            id: id,//改也是要根据唯一值id进行请求修改
            username: username.value,//获取input的输入值
            age: age.value
          }
        }).then(result => {
          console.log(result);
          $('#myModal').modal('hide')//隐藏bootstrap模态框
          alert(result.data.message)
          init()
        })
      })
  

\