先看需求:
点击——立即购买 按钮
会弹出一个二级菜单,需要用户继续选择
这个二级菜单有——继续购物,结账 —— 两个按钮,
那么我需要在点击图1的——立即购买——之后向后端提交购物数据,并且弹出二级菜单
这就要求点击按钮时,向后端提交数据,同时不跳转页面,
需求解释完毕,上代码
需要用到的包有 jquery.form.min.js
这是jquery的一个插件,不要下错了
<script type="text/javascript">
function sub() {
// jquery 表单提交
$("#formId").ajaxSubmit(function(message) {
// 对于表单提交成功后处理,message为返回内容
});
return false; // 必须返回false,否则表单会自己再做一次提交操作,并且页面跳转
}
引入
<script th:src="@{/js/vendor/jquery.form.min.js}"></script>
主要的form代码
<form th:action="@{/shopover}" id="formId" onsubmit="return sub()">
***********
*******
*********
<input type="text" name="name" value="1">
<div>
<!-- data-toggle做什么 data-target是谁-->
<button data-bs-toggle="modal" data-bs-target="#addto-cart-modal"
class="modal-add-to-cart-btn" >立即购买</button>
</div>
*******
*******
**********
</form>
表单提交到/shopover处理,处理的数据是input,表单由button按钮提交
整体思路:
页面点击按钮——立即购买——后,提交到sub()方法,数据交给sub()方法中的ajaxsubmit方法,提交到后端,同时返回false阻止页面跳转,之后button按钮去跳转到二级小菜单,至此需求完成
主要知识点,
form的οnsubmit=false时,能阻止表单提交时页面跳转
jquery.form.min.js的ajaxsubmit()方法能异步提交数据