1. 程式人生 > >[置頂] jQuery傳送ajax請求,一次點選重複提交

[置頂] jQuery傳送ajax請求,一次點選重複提交

問題描述:
前臺頁面

<input type="button" class="inputbutton" id="btnlogin" value="登入" />


show.js:

$("#btnlogin").click(function(){
    $.ajax( {	
    url : "LoginAction",	
    type:"post",
    dataType:"json",								
    data:"username="+userName,
    timeout:20000,
    success:function(){}
  });
});


點選登入按鈕時,會重複提交資料。百思不得其解!
原因分析:
看了網友們的分析,有的說是“兩次提交的原因是在執行完ajax請求後,並沒有阻止submit的行為,解決方式是不使用type為submit型別的按鈕,而是使用type是button的按鈕”可是我用的就是type=button的按鈕啊,故此原因排除。還有網友說這是jQuery的Bug,經測試在我寫的程式裡的其他頁面也用到類似方法,並沒有發生這種現象,故此原因也排除。
後來經過一番摸索,終於找到了原因所在:
我是在本頁面(login.jsp)include 了(top.jsp),這兩個頁面中都引入了show.js:

<script type="text/javascript" src="js/show.js"></script>


這也就導致了引入兩次show.js檔案,所以會發生提交兩次的現象。我把top.jsp檔案中的

<script type="text/javascript" src="js/show.js"></script>


刪除後,再沒發生此種現象。至此,完美解決!


這次失誤提醒我:以後寫程式碼一定要細心。