JQuery的ajax函數執行失敗,alert函數彈框一閃而過

先查看<form>標籤是否有action屬性,若是沒有,而且最後<button>標籤的type屬性爲'submit‘時,默認提交位置就是當前頁面php

若是在頁面右鍵檢查,點擊網絡,會在開頭髮現這樣的post包:html

在右側消息頭處可見,請求網址爲當前網址,而且響應頭部類型爲htmlajax

因此只要把form表單裏最後提交按鈕type="submit"換爲type="button",把按鈕變成原生按鈕,數據庫

就能夠正確使用ajax方法傳遞數據,緣由就是form表單最後的提交按鈕與使用ajax傳遞數據衝突了json

 

由於這個緣由浪費了挺久時間,甚至把代碼又從頭至尾寫了一遍(感受本身好蠢啊!),總結了一下調試過程。瀏覽器

先貼一下ajax代碼:網絡

        $(function () {
            $("#register").on('click',function () {
                $.ajax({
                    type: 'post',
                    url:"{:url('insert')}",
                    data:$('#login').serialize(),
                    dataType:'json',
                    success:function (data) {
                        alert('成功');
                    },
                    error:function () {
                        alert('error');
                    }
                })
            })
        });

這裏‘#register’是提交按鈕,‘#login’是表單,url發送到一個php腳本(插入表單數據到數據庫)。post

用谷歌瀏覽器打開頁面,點擊註冊按鈕後,當前頁面刷新,沒有任何反應。url

正常狀況下,ajax執行正確或失敗,根據上述代碼都應該有消息彈窗,因而感受到哪裏出了問題。spa

打開數據庫,發現表單的數據都已經插入到數據庫了,說明後臺php腳本是運行成功的,只是在返回數據的時候出現了問題。

右鍵檢查找到該post包,發現響應頭部類型爲html,而我設置的返回類型爲json。

更換了Edge瀏覽器,問題一樣是數據庫插入了數據,可是結果沒有消息彈窗。

更換火狐瀏覽器,再次點擊註冊按鈕時出現了消息彈窗,可是閃了一下就沒了!隱隱約約發現彈窗顯示爲‘error’(感謝火狐瀏覽器!)

根據alert彈窗一閃而過這個線索,發現瞭解決問題的這篇文章,同時感謝這篇文章的博主。

參考:關於layer的提示框,彈出框一閃而過的問題

相關文章
相關標籤/搜索