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>

删除后,再没发生此种现象。至此,完美解决!

这次失误提醒我:以后写代码一定要细心。

相关推荐