formdata收集所有表单数据
<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="../ajax第三天/lib/axios.js"></script>
<script>
//获取添加按钮
let btn = document.querySelector('.btnadd')
btn.addEventListener('click', function () {
//再获取表单里的数据
let addForm = document.querySelector('#addForm')
//创建一个formdata对象
let fd = new FormData(addForm)
//创建一个空的对象，用来存储用户输入的数据
let data = {}
//遍历fd
fd.forEach(function (value, key) {
console.log(value, key);
data[key] = value
})
//发请求
axios.post('http://www.itcbc.com:3006/api/addbook', data).then(res => {
console.log(res);
})
})
</script>
</body>
formdata上传文件
<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>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile" />
<label class="custom-file-label" for="customFile">请选择文件</label>
</div>
<input type="button" value="添加" class="btn btn-dark btnadd" />
</form>
<script src="./lib/axios.js"></script>
<script>
//获取表单
let addForm = document.querySelector('#addForm')
addForm.addEventListener('change', function () {
//创建文件对象 label中的 for 属性规定 label 与哪个表单元素绑定
let myfile = customFile.files[0]
//创建formdata对象
let fd = new FormData()
//添加到里面去 myfile:文件对象
fd.append('avatar', myfile)
//发请求
axios.post('http://www.itcbc.com:3006/api/formdata', fd).then(res => {
console.log(res);
})
})
</script>
</body>
