本文介绍利用JavaScript和jQuery实现防止用户重复提交表单的简单方案。通过定义全局标志位flag,在点击事件中判断状态:若允许提交则设置标志为false并执行逻辑,否则直接返回。该方法能有效避免快速点击导致的重复请求,代码简洁易懂。
JS防止重复提交代码示例
具体实现代码如下所示:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" id="msg">
<a href="#" id="result">提交</a>
<div id="show"></div>
<script src="jquery1.11.js"></script>
<script>
$(function(){
var flag = true;
"#result").on('click',function(){
if(flag){
flag = false;
}else{
return;
}
"#show").html('<p>'+"#msg").val()+'</p>');
});
})
</script>
</body>
</html> 实现起来非常简单!