Ajax案例：添加删除图书

样式引入了bootstrap。

    .main{
      width: 700px;
      padding: 20px;
      margin:10px auto;
      background-color: #bac1c9;
      border-radius: 40px;
    }

<div class="main">
      <div class="add form-group">
        <p>
          <label for="bookname">书名：</label>
          <input type="text" class="form-control" id="bookname" placeholder="水浒传" />
        </p>
        <p>
          <label for="author">作者：</label>
          <input type="text" class="form-control " id="author" placeholder="施耐庵" />
        </p>
        <p>
          <label for="publisher">出版社：</label>
          <input type="text" class="form-control" id="publisher" placeholder="北京图书出版社" />
        </p>
        <button id="btn" class="btn btn-default">添加图书</button>
      </div>

    <table class="table table-hover table-bordered">
      <thead>
        <tr>
          <th>id</th>
          <th>书名</th>
          <th>作者</th>
          <th>出版社</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>
  </div>

原生Ajax

1. 封装的ajax.js

function resolveData (data) {
  var arr = [];
  for (var k in data) {
    var str = k + "=" + data[k];
    arr.push(str)
  }
  return arr.join('&')
}

// var r = resolveData({ name: 'aa', age: 12 })
// console.log(r)

function $http (options) {
  var xhr = new XMLHttpRequest()

// 把传递过来的对象 转换为查询字符串
var qs = resolveData(options.data)

  if (options.method.toUpperCase() === 'GET') {
    xhr.open(options.method, options.url + '?' + qs);
    xhr.send()
  } else if (options.method.toUpperCase() === 'POST') {
    xhr.open(options.method,options.url);
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    xhr.send(qs);
  }

  
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // console.log()
      var result = xhr.responseText;
      options.success(result)
    }
  }

2. 封装渲染函数

// 渲染
function getBookList(){
  // 发送信息
  $http({
    method:'GET',
    url:"http://www.liulongbin.top:3006/api/getbooks",
    success:suces
  })
  // 处理返回的信息（渲染）
  function suces(res){
    console.log(res)
    // 把json字符串转换为对象
    // var data = JSON.parse(res);
    tbody.innerHTML=""
    res.data.forEach(value=>{
      var tr = document.createElement('tr');
      tr.innerHTML=`
        <td>${value.id}</td>
        <td>${value.bookname}</td>
        <td>${value.author}</td>
        <td>${value.publisher}</td>
        <td>
          <a href="javascript:;" id=${value.id}>删除</a> 
        </td>
      `
      tbody.appendChild(tr);          
    })
    console.log(tbody);
	// 添加a链接的绑定事件，删除
    var aArr = tbody.querySelectorAll('a');
    for(let item of aArr){item.addEventListener('click',delbook)}
  }
}

3. 与a链接绑定的删除函数

    // 删除
  function delbook(){
    console.log(this.id);
    $http({
      method:'GET',
      url:'http://www.liulongbin.top:3006/api/delbook',
      data:{
        id:this.id
      },
      success:function(res){
        console.log(res)
        let {status,msg} = res;
        if(status === 200){
          getBookList()
        }else{
          alert(msg)
        }
      }
    })
  }

4. 添加

  add.addEventListener('click',function(){
    var bname =bookname.value;
    var autor = author.value;
    var cbs = publisher.value;

    // 实现添加
    $http({
      method:'POST',
      url:"http://www.liulongbin.top:3006/api/addbook",
      data:{
        bookname:bname,
        author:autor,
        publisher:cbs
      },
      success:function(res){
        console.log(res)
        var data = res;
        if(data.status===201){
          // 重新渲染
          getBookList();
          // 清空
          bookname.value=""
          author.value=""
          publisher.value=""
        }else{
          alert(data.msg)
        }
      }
    })
  })

5. 调用与实现

    // 获取元素
    var tbody =document.querySelector('tbody');
    var add = document.querySelector("#btn");
    var bookname = document.querySelector('#bookname')
    var author = document.querySelector('#author')
    var publisher = document.querySelector('#publisher')
	
	getBookList();

jQuery + 模板引擎

模板引擎部分：

<script type="text/html" id="dataval">
  <tr>
    <td>{{id}}</td>
    <td>{{bookname}}</td>
    <td>{{author}}</td>
    <td>{{publisher}}</td>
    <td>
      <a href="javascript:;" id={{id}}>删除</a> 
    </td>
  </tr>

</script>

js部分：

$(function(){

// 获取元素
var bookname = $('#bookname');
var author = $('#author');
var publisher = $('#publisher');

// 渲染
getBookList();
function getBookList(){
  $.ajax({
    type:'GET',
    url:"http://www.liulongbin.top:3006/api/getbooks",
    success:function(res){
      console.log(res)
      // 把json字符串转换为对象
      // var data = JSON.parse(res);
      let {data,msg,status} = res;
      var rows = [];
      console.log(data);
      $.each(data,(k,value)=>{
        // 将value值存到 HTML标签字符串 里面
        rows[k] = template('dataval',value);
      })
        $('tbody').html(rows.join(''));
      // $('tbody').empty().append(rows.join(''));


      // 删除
      var aArr = $('tbody').find('a');
      console.log(aArr)

      aArr.on('click',function(){
        $.ajax({
            type:'GET',
            url:'http://www.liulongbin.top:3006/api/delbook',
            data:{
              id:this.id
            },
            success:function(res){
              // console.log(res,'sc')
            let {status,msg} = res;
            if(status === 200){
              getBookList()
            }else{
              alert(msg)
            }
            }
          })
      })

    }
  })
}

// 添加
$("#btn").click(function(){
  console.log(12434);
var bname =bookname.val();
// console.log(bookname,bname);
var autor = author.val();
var cbs = publisher.val();

// 实现添加
$.ajax({
  type:'POST',
  url:"http://www.liulongbin.top:3006/api/addbook",
  data:{
    bookname:bname,
    author:autor,
    publisher:cbs
  },
  success:function(res){
    console.log(res)
    var data = res;
    if(data.status===201){
      // 重新渲染
      getBookList();
      // 清空
      bookname.val("");
      author.val("");
      publisher.val("");
    }else{
      alert(data.msg)
    }
  }
})
})

})