layui表單提交使用form.on('submit(sub)',function (){}) 使用ajax請求時回調不執行的原因及解決方法

ayui使用官方的表單模塊form.on('submit(sub)',function (){}) 提交，使用ajax請求向后台請求一個執行結果，根據結果進行處理，出現回調無法執行，並且頁面出現了刷新

之前也遇到過這個問題，直接使用將form標簽修改成了div，通過jquery為提交按鈕添加點擊事件，而不用submit提交表單。

今天在為畢設添加修改密碼的功能的時候，再次遇到了這個問題，剛好有點空閑，決定找出真正的原因。

首先，debug服務端邏輯，發現能正常取值，返回值也是正常

之后，檢查ajax請求的 dataType是沒問題的，我在服務端返回了一個字符串，我也指定了text屬性。

百度（面向百度編程）之后發現原因是當button的type為submit的使用，頁面會自動刷新，而我們並不希望他刷新。

參考鏈接：https://blog.csdn.net/laukitto/article/details/69230348

既然知道了原因，那么問題就好解決了，只要在submit方法的最后添加個 return false就解決了

下面是請求的JS代碼，最后一行添加 return false 問題解決

form.on('submit(sub)',function (){
            var newpwd =  $('#newpwd').val();
            var confirmpwd = $('#confirmpwd').val();
            if(newpwd != confirmpwd){
                $('#rcp').attr('hidden','hidden');
                $('#ecp').removeAttr('hidden');
                layer.msg("兩次輸入密碼不一致");
                return false;
            }else{
                var data = {
                    originPwd:$('#originpwd').val(),
                    newPwd:$('#newpwd').val()
                }
                $.ajax({
                    url:'/user/changePwd',
                    type:'post',
                    dataType:'text',
                    contentType: 'application/json',
                    data:JSON.stringify(data),
                    timeout:2000,
                    beforeSend:function (xhr) {
                        xhr.setRequestHeader(header,token);
                    },
                    success:function(data){
                        console.log(data);
                        if(data == 'success'){
                            layer.msg("密碼修改成功");
                            location.href = "/user/loginpage"
                        }else{
                            layer.msg("密碼修改失敗")
                        }
                    },
                    error:function () {
                        layer.msg("密碼修改失敗")
                    }
                })
            }
            return false;
        })

 

 

---------------------------------------xadmin中彈出頁面，異步提交被關閉---------------------------------------------------------------------------

 

 

//監聽提交
form.on('submit(add)', function (data) {
    //console.log(data);
    //發異步，把數據提交給php
    var name = data.field.name;
    var desc = data.field.desc;
    $.ajax({
        type: 'post',
        url: "{:url('admin/AdminRole/save')}",
        data: {name: name,remark:desc},
        success: function (res) {
            if (res.status == 200) {
                layer.alert(res.msg, {icon: 6}, function () {
                    // 獲得frame索引
                    var index = parent.layer.getFrameIndex(window.name);
                    //關閉當前frame
                    parent.layer.close(index);
                   //刷新頁面
                    parent.location.reload();
                });
                 //parent.layer.reload();
               
            } else {
                layer.alert(res.msg, {icon: 5}, function () {
                    // 獲得frame索引
                    var index = parent.layer.getFrameIndex(window.name);
                    //關閉當前frame
                    parent.layer.close(index);
                    //刷新頁面
                    parent.location.reload();
                });
            }
        }
    });
    return false;
});