前端form表單頁(yè)面，2個(gè)輸入框，一個(gè)提交按鈕
<form id="form" action="" method="post" class="form-horizontal" role="form">
<div class="form-group">
<label for="project_name" class="col-xm-1 col-sm-2 col-md-1 control-label">項目名稱(chēng):</label>
<div class="col-xs-10 col-sm-8 col-md-5" >
<input type="text" class="form-control" id="project_name" name="project_name" placeholder="請輸入項目名稱(chēng)">
</div>
</div>
<div class="form-group">
<label for="responsible_name" class="col-xm-1 col-sm-2 col-md-1 control-label">負責人員:</label>
<div class="col-xs-10 col-sm-8 col-md-5" >
<input type="text" class="form-control" id="responsible_name" name="responsible_name" placeholder="請輸入負責人">
</div>
</div>
<div class="form-group">
<div class="col-xs-10 col-sm-offset-2 col-sm-8 col-md-offset-1 col-md-5" >
<input id="save" type="button" class="form-control btn btn-success" value="點(diǎn)擊提交">
</div>
</div>
</form>
這里用ajax提交請求
<script>
/**
定義表單提交事件
*/
function project_save(){
var $form = $("#form"); // The form instance
$.ajax({
type:'post',
url:'/page',
data: $form.serialize(),
dataType:'json',
success: function(data){
if(data.code == 0){
console.log("提交成功");
// 重定向到列表頁(yè)
location.href="/page/list_project/";
}else{
alert('添加失敗')
}
},
error: function (jqXHR, textStatus, e) {
alert("提交異常："+e);
}
});
}
//點(diǎn)提交按鈕，發(fā)請求
$('#save').click(function(e) {
project_save();
})
</script>遇到問(wèn)題，當快速點(diǎn)提交按鈕多次，會(huì )觸發(fā)多個(gè)請求
解決辦法，在點(diǎn)提交按鈕，發(fā)請求之前，可以調用beforeSend 方法，添加一個(gè)disabled屬性，禁用按鈕。這樣用戶(hù)就無(wú)法繼續點(diǎn)擊了。
收到返回結果的時(shí)候，再取消disabled屬性
/**
定義表單提交事件
*/
function project_save(){
var $form = $("#form"); // The form instance
$.ajax({
type:'post',
url:'/page',
data: $form.serialize(),
dataType:'json',
beforeSend: function() {
// 設置disabled阻止用戶(hù)繼續點(diǎn)擊
$('#save').attr('disabled', 'disabled');
},
success: function(data){
if(data.code == 0){
console.log("提交成功");
// 重定向到列表頁(yè)
location.href="/page/list_project/";
}else{
// 讓按鈕生效，重新可點(diǎn)擊
$('#save').removeAttr('disabled');
alert('添加失敗')
}
},
error: function (jqXHR, textStatus, e) {
// 讓按鈕生效，重新可點(diǎn)擊
$('#save').removeAttr('disabled');
alert("提交異常："+e);
}
});
}這樣就能解決快速點(diǎn)擊，導致前端頁(yè)面重復提交的問(wèn)題
一般在 beforeSend 發(fā)請求之前禁用提交按鈕，在請求完成之后移除 disabled 屬性。
complete 是在完成請求的時(shí)候觸發(fā)。
function project_save(){
var $form = $("#form"); // The form instance
$.ajax({
type:'post',
url:'/page',
data: $form.serialize(),
dataType:'json',
beforeSend: function() {
// 設置 disabled 阻止用戶(hù)繼續點(diǎn)擊
$('#save').attr('disabled', 'disabled');
},
complete: function () {
// 請求完成移除 disabled 屬性
$("#save").removeAttr("disabled");
},
success: function(data){
if(data.code == 0){
console.log("提交成功");
// 重定向到列表頁(yè)
location.href="/page/list_project/";
}else{
// 讓按鈕生效，重新可點(diǎn)擊
alert('添加失敗')
}
},
error: function (jqXHR, textStatus, e) {
alert("提交異常："+e);
}
});
}
聯(lián)系客服
