layUI使用不當導致在Ajax提交不進入回調函數

<script>
    layui.use(['layer', 'form','laydate'], function(){
        var layer = layui.layer
            ,laydate=layui.laydate
            ,form = layui.form;

        form.on('submit(go)', function(data){
            $.ajax({
                url:'/user/addOrUpdate',
                method:'post',
                data:data.field,
                dataType:'JSON',
                success:function(res){
                    if(res.code='0'){
                        parent.closeIframe(res.msg);
                    }
                    else
                        alert(res.msg);
                },
                error:function (data) {
                }
            })
            return false;
        });
    });
</script>

上面代碼的紅色部分就是天坑:

症狀:一個簡單的AJAX提交表單操作,經常發生後臺數據保存好了,前端layer彈出層沒有關閉,父頁面沒有刷新,定位發現是回調函數沒有執行!!!用Google Chrome瀏覽器這種現象較少,2而Safari 和 firefox瀏覽器100%發生。

解決過程:困擾了很久,以爲是哪裏代碼有問題,檢查來檢查去沒發現問題,後來基本定位到layUI這個框架。

結果:加上 紅色字體 return false,解決!!

附上官方文檔關於這裏的說明!!

form.on('submit(*)', function(data){
  console.log(data.elem) //被執行事件的元素DOM對象,一般爲button對象
  console.log(data.form) //被執行提交的form對象,一般在存在form標籤時纔會返回
  console.log(data.field) //當前容器的全部表單字段,名值對形式:{name: value}
  return false; //阻止表單跳轉。如果需要表單跳轉,去掉這段即可。
});

這是個毛意思?AJAX提交的時候坑咋不說?

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章