前端选择支付方式的界面 用html,css,js 后端使用java处理数据
时间: 2024-05-08 13:15:05 浏览: 11
前端代码:
HTML:
```html
<div id="payment-method">
<h2>Select Payment Method</h2>
<div class="payment-card">
<input type="radio" name="payment-method" value="credit-card" id="credit-card" checked>
<label for="credit-card">
<img src="credit-card.png" alt="Credit Card">
Credit Card
</label>
</div>
<div class="payment-card">
<input type="radio" name="payment-method" value="paypal" id="paypal">
<label for="paypal">
<img src="paypal.png" alt="Paypal">
Paypal
</label>
</div>
<button id="submit-payment" onclick="submitPayment()">Submit</button>
</div>
```
CSS:
```css
#payment-method {
display: flex;
flex-direction: column;
align-items: center;
}
.payment-card {
display: flex;
align-items: center;
margin: 10px;
}
.payment-card img {
max-width: 50px;
margin-right: 10px;
}
```
JS:
```javascript
function submitPayment() {
const paymentMethod = document.querySelector('input[name="payment-method"]:checked').value;
// Send paymentMethod to backend using AJAX or fetch
}
```
后端代码:
Java:
```java
public class PaymentController {
@PostMapping("/submitPayment")
public ResponseEntity<?> submitPayment(@RequestParam("paymentMethod") String paymentMethod) {
// Process paymentMethod
return ResponseEntity.ok().build();
}
}
```