LayUI中使用AJAX提交巨坑記錄
阿新 • • 發佈:2019-02-06
<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提交的時候坑咋不說?