1) 写一个book.html页面,包含bookname,bookprice,booknum,submit:buy 2) 写一个bookbuy.js,用get和post方式,启动服务,在网页端能够完成如下功能 1: 购买页面 2: 购买成功跳转页面
时间: 2024-09-29 11:06:51 浏览: 22
建立一个简单的数据库系统(1).doc
首先,我们来创建一个简单的HTML文件`book.html`,用于显示书籍信息并提供购买按钮:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>图书购买</title>
<!-- 引入JavaScript文件 -->
<script src="bookbuy.js"></script>
</head>
<body>
<h2>图书详情</h2>
<form id="purchaseForm">
<label for="bookName">书名:</label>
<input type="text" id="bookName" name="bookName"><br><br>
<label for="bookPrice">价格:</label>
<input type="number" id="bookPrice" name="bookPrice"><br><br>
<label for="bookNum">购买数量:</label>
<input type="number" id="bookNum" name="bookNum"><br><br>
<button type="button" onclick="buyBook()">购买</button>
<button type="button" onclick="resetForm()">重置</button>
</form>
<div id="result" style="display:none;">
<p>购买成功,订单号:<span id="orderId"></span></p>
<a href="success.html">点击跳转到成功页面</a>
</div>
<script>
function buyBook() {
// JavaScript 代码将在这里处理购买逻辑
}
function resetForm() {
document.getElementById("purchaseForm").reset();
}
</script>
</body>
</html>
```
接下来,我们编写`bookbuy.js`文件,实现GET和POST方式的购买逻辑:
```javascript
// 使用fetch API 进行异步请求
const apiUrl = 'https://your-api-server.com/books/buy'; // 更改为实际API地址
function buyBook(e) {
e.preventDefault(); // 阻止表单默认提交行为
const bookName = document.getElementById('bookName').value;
const bookPrice = document.getElementById('bookPrice').value;
const bookNum = parseInt(document.getElementById('bookNum').value);
if (!bookName || !bookPrice || isNaN(bookNum)) {
alert('请输入完整的信息!');
return;
}
// 使用POST方法
const data = {
bookName,
bookPrice,
bookNum
};
fetch(apiUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
if (response.success) { // 检查响应状态
document.getElementById('orderId').innerText = data.orderId; // 显示订单号
document.getElementById('result').style.display = 'block';
window.location.href = 'success.html'; // 跳转到成功页面
} else {
alert('购买失败:' + response.message);
}
})
.catch(error => console.error('Error:', error));
}
// 示例中GET请求未列出,因为通常GET用于获取数据而不是修改数据
// 如果需要GET请求(例如查询库存),需相应地修改URL和请求方式,并在服务器端处理
window.onload = function () {
// 初始化表单重置功能
resetForm();
};
```
在这个例子中,用户在`book.html`页面填写图书信息后点击购买按钮,`buyBook`函数会被触发。它会发送一个POST请求到服务器,如果购买成功,会在`success.html`页面显示订单号,并提示用户已购买。
相关问题:
1. 为什么我们在`bookbuy.js`中使用了fetch API而不是传统的XMLHttpRequest?
2. 如何在实际项目中设置`apiUrl`?
3. POST请求如何处理服务器返回的状态码和错误信息?
阅读全文