`

LayUI form表单提交之ajax请求后不执行回调方法

 
阅读更多

form表单通过ajax异步提交实现新增员工的功能时,发现请求是成功的,后台也新增了该员工,却不执行回调方法(success、error),如下所示:

form.on('submit(addStaffFilter)', function(data){
                    $.ajax({
                        url:ctx+"/backend/staffManagement/addStaff",
                        type:"post",
                        contentType: 'application/json',
                        dataType:"json",                        
                        data:JSON.stringify({"staffName":$("#staffName").val(),"mobilePhone":$("#mobilePhone").val(),"idNumber":$("#idNumber").val(),"areaId":areaId,"departmentId":departmentId,"email":$("#email").val()}),
                        success:function (data) {
                            console.log("1111111111111");
                        },
                        error:function (data) {
                            console.log("22222222222222");
                        }
                    });

 问题解决:

//缺少这一句
return false;

完整js代码:

form.on('submit(addStaffFilter)', function(data){
                    $.ajax({
                        url:ctx+"/backend/staffManagement/addStaff",
                        type:"post",
                        contentType: 'application/json',
                        dataType:"json",                        
                        data:JSON.stringify({"staffName":$("#staffName").val(),"mobilePhone":$("#mobilePhone").val(),"idNumber":$("#idNumber").val(),"areaId":areaId,"departmentId":departmentId,"email":$("#email").val()}),
                        success:function (data) {
                            console.log("1111111111111");
                        },
                        error:function (data) {
                            console.log("22222222222222");
                        }
                    });
                return false;
                }); 
分享到:
评论

相关推荐

    layui form表单提交之后重新加载数据表格的方法

    一旦该表单被提交,就会执行回调函数,并且能够获取到表单中的数据。 ###知识点三:数据表格的刷新 在回调函数中,我们看到关键的一行代码: ```javascript table.reload('tableReload',{ page:{ curr:1 }, ...

    form表单的异步回调方法

    通过以上步骤,我们可以实现一个form表单的异步回调,使得用户能够在提交表单后等待后台响应,而无需等待页面刷新。这种方法在现代Web应用中非常常见,特别是在需要动态更新内容或进行复杂交互的场景下。在压缩包`...

    layui 图片上传+表单提交+ Spring MVC的实例

    - `done`回调在上传成功后执行,通常会接收到服务器返回的数据,如图片的URL,然后可以更新界面或者存储到表单数据中。 - `error`回调在上传失败时执行,可以展示错误信息并提供重试功能。 3. **表单提交与数据...

    ajaxForm异步提交表单(含图片)

    // 提交成功后的回调函数,处理服务器返回的数据 }, error: function(xhr, status, error) { // 错误处理 } }); ``` 4. **处理图片上传**:由于ajaxForm支持File API,我们可以轻松处理图片上传。在...

    关于在LayUI中使用AJAX提交巨坑记录

    通过这样的调整,`return false`会在AJAX请求完成后执行,避免了因为提前阻止表单提交而导致的前端行为异常。同时,需要注意的是,比较操作符`==`和`===`的区别,`===`是严格相等,这里应该使用`===`来确保类型和值...

    ajax提交form表单

    在IT领域,特别是Web开发中,使用Ajax(Asynchronous JavaScript and XML)进行form表单的无刷新提交是一项关键技能。这种技术允许网页在不重新加载整个页面的情况下与服务器交互,从而提高了用户体验。以下是对给定...

    Spring下的AJAX和Form表单提交及单/多方法控制器比较

    在本文中,我们将探讨在Spring框架下,使用AJAX与传统Form表单提交的区别,以及单方法控制器和多方法控制器的使用场景。首先,我们来看看AJAX提交与Form表单提交的基本概念。 **AJAX(Asynchronous JavaScript and ...

    在layui中使用form表单监听ajax异步验证注册的实例

    在LAYui框架中,可以方便地通过监听form表单的提交事件,并结合ajax异步请求进行数据验证。以下是从给定文件中提取的知识点: 1. **LAYui框架简介**:LAYui是一个前端UI框架,它提供了一套丰富的HTML/CSS/JS组件,...

    使用AJAX提交Form表单实例演示

    总结,这个实例演示了如何使用jQuery和AJAX来实现Form表单的无刷新提交。通过这种方式,用户可以在提交表单后立即看到结果,而无需等待页面刷新,提高了交互性和用户体验。记住,实际应用中你需要根据具体需求调整...

    layui的表单验证支持ajax判断用户名是否重复的实例

    传统的表单验证通常会在表单提交时进行,而引入ajax可以让验证过程在不提交表单的情况下异步进行,从而提升用户体验。在layui中,我们可以通过定义表单验证事件,并在其中编写ajax请求代码来实现。 ### 示例代码...

    使用jQuery.form插件,实现完美的表单异步提交

    // 提交成功后的回调函数,处理服务器返回的数据 console.log('Success:', response); }, error: function(xhr, status, error) { // 提交失败时的回调函数,处理错误信息 console.error('Error:', error); }...

    完成的 Ajax 提交表单

    本示例着重介绍如何使用Ext JS框架中的Ajax组件来实现异步提交表单,以及如何处理success和failure回调。 首先,Ext JS是一个强大的JavaScript库,用于构建富客户端应用程序。它提供了丰富的组件模型和数据绑定机制...

    利用AjaxSubmit()方法实现Form提交表单后回调功能

    AjaxSubmit()方法是jQuery Form插件提供的一种功能强大的表单提交方式,它允许我们在异步提交表单时实现前后端交互的回调功能,从而避免页面刷新,提高用户体验。在实际应用中,比如文件上传、表单验证等场景,...

    JQuery.form表单提交参数详解.txt

    - 用途:提交表单之前执行的回调函数。可以在这个函数中进行一些验证操作或修改提交数据。 - 示例:`beforeSubmit: showRequest`,其中 `showRequest` 是一个自定义函数。 3. **`success`**: - 用途:提交成功...

    实现文件上传,以及表单提交成功的回调函数

    - 在表单提交过程中,前端通常会设置一个回调函数,当表单提交成功时执行。这通常通过监听AJAX请求的`success`事件来实现。在jQuery中,我们可以使用`.ajax()`或`.form()`方法的回调参数,如`success: function...

    使用jQuery ajax提交表单代码

    本文将深入探讨如何使用jQuery的ajax方法来提交表单,从而实现异步数据交换,提高用户体验。 首先,jQuery的$.ajax()函数是进行Ajax请求的核心,它允许我们与服务器进行异步数据通信。在“使用jQuery ajax提交表单...

    Django之Form表单验证及Ajax验证方式汇总

    4. **前端处理响应**:在Ajax请求的`success`和`error`回调中,前端可以根据服务器返回的状态和错误信息更新UI。 通过这种方式,Django Form结合Ajax验证可以提供更友好的用户体验,用户在提交表单时不会看到页面...

    Ajax表单提交插件jquery form

    **Ajax表单提交插件jQuery Form** 在Web开发中,jQuery Form插件是一个非常实用的工具,它使得使用Ajax技术提交HTML表单变得简单而直观。这个插件扩展了jQuery库,提供了强大的功能,允许开发者无刷新地更新页面...

    ajax异步提交表单

    ### AJAX异步提交表单知识点解析 #### 一、AJAX技术概述 AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以...

Global site tag (gtag.js) - Google Analytics