<h2>添加商品</h2> <form action="#"> <input type="hidden" id="id-input" name="id"> <label for="name-input">商品名称:</label> <input type="text" name="name" id="name-input" placeholder="请输入商品名称"> <label for="price-input">商品价格:</label> <input type="number" name="price" id="price-input" placeholder="请输入商品价格"> <div class="btn"> <button id="save-button">保存</button> <button id="cancel-button">取消</button> </div> </form> </div>利用jQuery 根据上述代码编写一个同样的编辑代码
时间: 2023-07-06 11:05:01 浏览: 43
```html
<div class="edit-form">
<h2>添加商品</h2>
<form action="#">
<input type="hidden" id="id-input" name="id">
<label for="name-input">商品名称:</label>
<input type="text" name="name" id="name-input" placeholder="请输入商品名称">
<label for="price-input">商品价格:</label>
<input type="number" name="price" id="price-input" placeholder="请输入商品价格">
<div class="btn">
<button id="save-button">保存</button>
<button id="cancel-button">取消</button>
</div>
</form>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
$('#save-button').on('click', function(e) {
e.preventDefault();
const name = $('#name-input').val();
const price = $('#price-input').val();
if (!name || !price) {
alert('请填写完整信息');
return;
}
// 向后台发送添加商品的请求
$.ajax({
type: 'POST',
url: '/add-product', // 修改为实际接口地址
data: {
name: name,
price: price
},
success: function(data) {
alert('添加成功');
// 清空表单
$('#name-input').val('');
$('#price-input').val('');
},
error: function(err) {
alert('添加失败');
}
});
});
$('#cancel-button').on('click', function(e) {
e.preventDefault();
// 清空表单
$('#name-input').val('');
$('#price-input').val('');
});
});
</script>
```