原生方式发起post方式请求
<body>
<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 btn = document.querySelector('.btnadd')
let bookname = document.querySelector('[name="bookname"]')
let author = document.querySelector('[name="author"]')
let publisher = document.querySelector('[name="publisher"]')
btn.addEventListener('click', function () {
//获取数据
let booknameV = bookname.value
let authorV = author.value
let publisherV = publisher.value
//创建异步xhr对象
let xhr = new XMLHttpRequest()
//发起请求
//请求行
xhr.open('post', 'http://www.itcbc.com:3006/api/addbook')
// 请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 请求体
xhr.send(`bookname=${booknameV}&author=${authorV}&publisher=${publisherV}`)
//请求响应
xhr.addEventListener('load', function () {
console.log(xhr.response);
})
})
</script>
</body>
