1. 程式人生 > >前端的坑-提交表單頁面自動重新整理

前端的坑-提交表單頁面自動重新整理

遇到的問題

        最近一段時間需要用到jsp加上ajax區域性的重新整理頁面,本來並不是一個比較複雜的功能,但是卻遇到了比較大的問題,問題的具體情況是每當區域性重新整理之後頁面就會自動重新整理,然後就又回到了沒有重新整理前的狀態,這讓人感覺很坑爹啊!

排查問題

        有問題了,當然是要首先排查程式碼了,看了無數次的程式碼,都沒發現會導致頁面自動重新整理的情況,讓人十分苦惱。
        然後的話,就想著難道是jquery的html()方法重新整理頁面,後來查了很久,也沒有能夠找出來。
        無奈之下,回去看頁面,發現了一個細節,原來這個地方的搜尋按鈕在一個表單之中,偶,萬事大吉,終於找到了。原來是所使用的bootstrap的導航欄使用了表單。

<script language="javascript" type="text/javascript">
    $("#search").click(function() {
        $.ajax({
            type : "POST",
            url : "/ajaxsearch/零食",
            async : false,
            data : {},
            dataType : "html",
            timeout : 1000,
            success : function
(dates) {
$("#mainContent").html(dates); window.event.returnValue = false; }, error : function() { console.log("請求失敗,請重試!"); } }); });
</script>

收穫

        這次的收穫就是當你所做的東西依賴第三方的時候,一定要小心一些小的細節,小心被坑到,有時候被坑到還渾然不自知,真的是相當的傷心啊!
        然後,還有就是當表單提交的時候會重新整理當前的頁面,那麼,如何阻止?只需要加上window.event.returnValue = false;

這樣的一句程式碼就可以萬事大吉了。踩到坑真的可以讓人成長的。