如何避免重复请求按钮单击两次

Posted 2023-02-24

【中文标题】如何避免重复请求按钮单击两次

【英文标题】：How can i avoid duplicate request of button click twice

【发布时间】：2017-06-06 04:49:33

【问题描述】：

我正在单击一个按钮并调用一个函数...当我单击按钮两次时

数据插入两次

在 mysql 数据库中，我该如何避免它..？

这是我的动态 html：

<button type="button"
    href="javascript:;"
     class="btn btn-primary"
       onclick="jobResponse('yes',<?php echo $myjobs['id_job'];?>)"> 
         Subimt </button>

这是我的 ajax 调用函数：

 <script type="text/javascript">
    function jobResponse(res,jobId)
        var frm_data =  res : res,
            jobId : jobId
        
        $.ajax(
            //ajax resopons and requst
        );
    
    </script>

我该如何解决这个问题..？

【参考方案1】：

传递按钮引用并禁用它，稍后当 ajax 完成后，如果需要再次启用它。

<button type="button" href="javascript:;" class="btn btn-primary" onclick="jobResponse(this, 'yes',<?php echo $myjobs['id_job'];?>)">    Subimt</button>
<!--                                                                   ----------------^^^^----


<script type="text/javascript">
  function jobResponse(ele, res, jobId) 
    var frm_data = 
      res: res,
      jobId: jobId
    ;
    // disable the button
    $(ele).prop('disabled', true);
    $.ajax(
      //ajax resopons and requst
      complete: function() 
        // enable the button if you need to
        $(ele).prop('disabled', false);
      
    );
  
</script>

【讨论】：

如果有两个按钮，这将是相同的..？

@LyndaCarter ：是的，做同样的事情

【参考方案2】：

当用户第一次点击下面的按钮时，你可以禁用

onclick="this.disabled='true';jobResponse('yes',<?php echo $myjobs['id_job'];?>)"> 

【参考方案3】：

你可以使用这样的标志

<script type="text/javascript">

var isClicked = false;
    function jobResponse(res,jobId)
if(isClicked=== false)
       var frm_data =  res : res,
            jobId : jobId
        
        $.ajax(
            //ajax resopons and requst
        );
       isClicked  = true;

    
    </script>

【参考方案4】：

您可以在此处遵循一个简单的技巧。最初定义一个布尔类型变量true。第一次点击后会变成false。就这样。

<script type="text/javascript">
var x=true;
function jobResponse(res,jobId)
    if(x)
        x=false;
        var frm_data =  res : res,
            jobId : jobId
                 
        $.ajax(
            //ajax resopons and requst
        );
    

</script>

【参考方案5】：

在函数调用后禁用按钮，在ajax响应后启用

动态html

<button type="button"
href="javascript:;"
 class="btn btn-primary"
 id="saveJob"
   onclick="jobResponse('yes',<?php echo $myjobs['id_job'];?>)"> 
     Subimt </button>

Ajax 函数

<script type="text/javascript">
   function jobResponse(res, jobId) 
   var frm_data = 
  res: res,
  jobId: jobId
;
// disable the button
$(#saveJob).prop('disabled', true);
$.ajax(
  //ajax resopons and requst
  complete: function() 
    // enable the button if you need to
    $(#saveJob).prop('disabled', false);
  
);

我希望这会对你有所帮助。