Ajax阻止表单重复提交

先说一下场景：有一个抽奖的活动，后台配置产品，每个产品被抽到的概率。在提交的时候，需要先验证概率有没有超过总和，如果超过了就不让表单提交，如果没有超过就正常提交，好了，场景说完了，下面正式代码

HTML部分：

<form action="a.php" method="post" onsubmit="return submittest();">
       <div class="form-group">
          <label>中奖商品概率</label>
          <input type="text" name="probability" class="form-control probability" placeholder="请输入正整数" value="" />
          <label>注：概率填写必须是正整数，且相加为10000</label>
       </div>
       <div class="form-group">
          <label>抽奖商品数量</label>
          <input type="text" name="productnum" class="form-control" value="" />
       </div>
       <div class="form-group">
           <input type="submit" class="btn btn-success" value="提交"/>
       </div>
</form>

上面的form那里要注意

onsubmit="return submittest();"

必须要加return。

提交按钮那里用input，不要用botton了

Javascript部分

<script type="text/javascript">
function submittest(){  
    var probability = $('.probability').val();
    var ajaxFlag=false;//用flag的方式，使得子函数$.ajax与主函数submittest()交互起来
    $.ajax({  
        type:"get",
        url:"b.php",
        async:false,//设置同步方式，非异步！  
        cache:false,//严格禁止缓存！  
        data:{  
            probability:probability
        },   
        success:function(data){  
            if(data == 1){  
                alert("概率错误");
                ajaxFlag=false;
            }else{
            	ajaxFlag=true;
            }  
        }  
    });
    if(!ajaxFlag){  
        return false;  
    }  
}
</script>

上面的这一句要注意：一定要先在ajax外面定义一个变量

var ajaxFlag=false;//用flag的方式，使得子函数$.ajax与主函数submittest()交互起来

php部分的代码就自己去写吧

这样就可以实现你要的效果了