formdata一次性收集所有表单数据案例

 <form class="card-body bg-light" id="addForm">
    <!-- 书名 -->
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">书名</span>
      </div>
      <input type="text" class="form-control" placeholder="请输入图书名称" name="bookname" />
    </div>
    <!-- 作者 -->
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">作者</span>
      </div>
      <input type="text" class="form-control" placeholder="请输入作者名字" name="author" />
    </div>
    <!-- 出版社 -->
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">出版社</span>
      </div>
      <input type="text" class="form-control" placeholder="请输入出版社名称" name="publisher" />
    </div>
    <input type="button" value="添加" class="btn btn-dark btnadd" />
  </form>
  <script src="./lib/axios.js"></script>
  <script>

    //获取添加按钮
    let btnadd = document.querySelector('.btnadd')

    //单击事件
    btnadd.addEventListener('click', function () {
      //获取整个表单元素  获取元素要在单击事件之后，不然跟以前拥有取不到，要先点击再取值
      let addForm = document.querySelector('#addForm')

      //收集到整个表单元素（前提拥有name属性，name名字要按照接口文档来写）
      let fd = new FormData(addForm) //拿到的这些只能对文件有效，对于value我们需要转换类型声明对象，以对象形式给它
      let obj = {}
      fd.forEach(function (v, key) {
        // console.log(v, key); 一个是值，一个是键
        obj[key] = v  //赋值到对象里
      })
      console.log(obj);
      // axios.post('http://www.itcbc.com:3006/api/addbook', obj).then((result) => { console.log(result); })
      axios.post('http://www.itcbc.com:3006/api/addbook', obj).then(result => {
        if (result.data.status == 0) {
          alert(result.data.message)
        } else {
          alert('图书添加失败')
        }
      })
    })
  </script>