表单提交数据页面不跳转

先看需求：

点击——立即购买 按钮

会弹出一个二级菜单，需要用户继续选择

这个二级菜单有——继续购物，结账 —— 两个按钮，

那么我需要在点击图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（）方法能异步提交数据