可以写一个商品购买界面吗?使用html,css,js和后端交互的代码吗?
时间: 2024-05-02 19:18:17 浏览: 8
可以,以下是一个简单的商品购买界面的代码示例:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>商品购买界面</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1>商品购买界面</h1>
<form id="buyForm" method="post" action="buy.php">
<label for="itemName">商品名称:</label>
<input type="text" id="itemName" name="itemName" required><br>
<label for="itemPrice">商品价格:</label>
<input type="number" id="itemPrice" name="itemPrice" required><br>
<label for="quantity">数量:</label>
<input type="number" id="quantity" name="quantity" required><br>
<label for="totalPrice">总价:</label>
<input type="number" id="totalPrice" name="totalPrice" readonly><br>
<button type="submit" id="buyButton">购买</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```
.container {
margin: 50px auto;
text-align: center;
}
form {
display: inline-block;
border: 1px solid #ccc;
padding: 20px;
text-align: left;
}
label {
display: inline-block;
width: 80px;
text-align: right;
margin-right: 10px;
}
input[type=text], input[type=number] {
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #3e8e41;
}
```
JavaScript代码:
```
document.addEventListener("DOMContentLoaded", function() {
var itemPrice = document.getElementById("itemPrice");
var quantity = document.getElementById("quantity");
var totalPrice = document.getElementById("totalPrice");
var buyForm = document.getElementById("buyForm");
// 计算总价
function calculateTotalPrice() {
var price = parseFloat(itemPrice.value);
var qty = parseInt(quantity.value);
var total = price * qty;
if (!isNaN(total)) {
totalPrice.value = total.toFixed(2);
}
}
// 监听表单变化
itemPrice.addEventListener("input", calculateTotalPrice);
quantity.addEventListener("input", calculateTotalPrice);
// 提交表单
buyForm.addEventListener("submit", function(e) {
e.preventDefault(); // 阻止默认提交行为
var formData = new FormData(buyForm);
var xhr = new XMLHttpRequest();
xhr.open("POST", buyForm.action);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
alert("购买成功!");
} else {
alert("购买失败!");
}
}
};
xhr.send(formData);
});
});
```
后端PHP代码(buy.php):
```
<?php
$itemName = $_POST["itemName"];
$itemPrice = $_POST["itemPrice"];
$quantity = $_POST["quantity"];
$totalPrice = $_POST["totalPrice"];
// TODO: 处理购买逻辑,比如写入数据库等
// 假设购买成功
http_response_code(200); // 返回200状态码
```