【Ajax提交Form中表单不跳转示例】

项目场景：示例:Ajax提交Form中表单不跳转

---

问题描述

前端提交表单是经常遇到的需求. 点击表单提交执行Ajax提交表单内容, 但不跳转页面

例如：

               <form id="batchUpdateform" action="" name="batchUpdateform" action="/music/batchUpdate" method="post">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">风格</label>
                            <div class="layui-input-inline">
                                <input type="text" name="style" placeholder="" class="layui-input">
                            </div>
                        </div>
                        <!---other inputs----->
                           |
                            <button type="button" class="pear-btn" lay-submit lay-filter="form-batchUpdate">批量修改</button>
                        </div>
                    </div>
                </form>

解决方案：

提示：这里填写该问题的具体解决方案：

        // 表单提交时阻止默认的表单提交行为并使用AJAX发送请求
        $('#batchUpdateform').on('submit', function(event) {
            event.preventDefault(); // 阻止默认的表单提交行为
            var formData = new FormData(this); // 创建FormData对象以包含表单数据
            $.ajax({
                type: 'POST',
                url: $(this).attr('action'), // 表单的action属性值作为目标URL
                data: formData, // 发送表单数据
                processData: false, // 告诉jQuery不要处理发送的数据
                contentType: false, // 告诉jQuery不要设置内容类型头信息
                success: function(response) {
                    // 如果AJAX请求成功，显示服务器返回的确认消息
                    layer.msg('操作成功！');refreshTable();
                    // 这里可以添加其他逻辑来更新页面或显示其他信息
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    // 如果发生错误，显示错误消息或重新提示用户重试等操作
                    layer.msg('服务器错误，请稍后重试。');
                }
            });
        });