如何停止ajax多次运行？

Question

我正在使用cakephp framework 2.0。我不知道为什么我的ajax多次运行。我已经创建了动态元素，以便＆＃39;为什么我用这个点击功能

$(document).on('click','.save',function(){ });

现在你可以看到这里的图片是我的Jquery和ajax代码： -

enter code here
$(document).on('click','.save',function(){
        var user_id = "<?= $user_id; ?>";
        var rowid = $(this).parent().parent().attr('id');
        var saveNameOrg = $(this).attr('name').split('_');          
        var saveName = saveNameOrg[0];
        var carePlanid = saveNameOrg[1];
        //$("input[name=nameGoesHere]").val();
        var yn_value = $('input[name="data['+saveName+']['+"'y_n'"+']"]').is(":checked"); 
        var green_value = $('input[name="data['+saveName+']['+"'green'"+']"]').val(); 
        var orange_value = $('input[name="data['+saveName+']['+"'orange'"+']"]').val(); 
        var red_value = $('input[name="data['+saveName+']['+"'red'"+']"]').is(":checked");
        var alert_value = $('input[name="data['+saveName+']['+"'alert'"+']"]').is(":checked"); 

            $.ajax({
                type:'post',
                url:'/app/webroot/CeyHello/doctors/custom_plan_new_ajax',
                data:{ user_id: user_id,yn:yn_value, green: green_value, orange: orange_value, red: red_value, alert: alert_value, question_id: saveName, carePlanid: carePlanid },
                success:function(resp){
                    if(resp == "success"){
                        alert("Data Saved");
                    }

                },
                error:function(){

                }

            });

    });

这是我的按钮： -

enter code here
<td><a href="javascript:;" id="<?php echo $result['cq_id'];?>" class="save" name="<?php echo $result['cq_id']."_".$carePlansList['EveCarePlansList']['id']; ?>"><i class="fa fa-save"></i></a></td>

我的Html数据： -

enter code here
    <?php 
    if(isset($carePlansList['EveChfQuestion'])){
    if(!empty($carePlansList['EveChfQuestion'])){
    foreach($carePlansList['EveChfQuestion'] as $key => $result) { ?>
        <?php if(in_array($result['cq_id'], $editedQuesIds)) { foreach($eveChfQuesUser as $editQues) { 
            if($editQues['EveChfQuestionsUser']['q_id'] == $result['cq_id']) {
        ?>
        <tr id="row_<?=$editQues['EveChfQuestionsUser']['q_id']?>">
            <th scope="row"><i class="fa fa-file-archive-o"></i></th>
            <td>
                <div class="checkbox checkbox-inline checkbx">
                    <input name="data[<?php echo $editQues['EveChfQuestionsUser']['q_id']; ?>]['y_n']" id="checkbox0" type="checkbox" checked>
                    <label for="checkbox0"></label>
                </div>
            </td>
            <td><?=$editQues['EveChfQuestionsUser']['cq_question'] ?></td>
            <td>
                <div class="checkbox checkbox-success checkbox-inline checkbx">
                    <input id="inlineCheckbox2" name="data[<?php echo $editQues['EveChfQuestionsUser']['q_id']; ?>]['green']" type="checkbox" value="Y" <?php if($editQues['EveChfQuestionsUser']['green_high_value'] != "") echo "checked"; ?>>
                    <label for="inlineCheckbox2">Y</label>
                </div>
                <div class="checkbox checkbox-pink checkbox-inline checkbx">
                    <input name="data[<?php echo $editQues['EveChfQuestionsUser']['q_id']; ?>]['green']"  id="checkbox0" type="checkbox" value="N" <?php if($editQues['EveChfQuestionsUser']['green_low_value'] != "") echo "checked"; ?>>
                    <label for="checkbox0">N</label>
                </div>
            </td>
            <td>
                <div class="checkbox checkbox-success checkbox-inline checkbx">
                    <input name="data[<?php echo $editQues['EveChfQuestionsUser']['q_id']; ?>]['orange']"  id="inlineCheckbox2" type="checkbox" value="Y" <?php if($editQues['EveChfQuestionsUser']['orange_high_val'] != "") echo "checked"; ?>>
                    <label for="inlineCheckbox2">Y</label>
                </div>
                <div class="checkbox checkbox-pink checkbox-inline checkbx">
                    <input name="data[<?php echo $editQues['EveChfQuestionsUser']['q_id']; ?>]['orange']"  id="checkbox0" type="checkbox" value="N" <?php if($editQues['EveChfQuestionsUser']['orange_low_value'] != "") echo "checked"; ?>>
                    <label for="checkbox0">N</label>
                </div>
            </td>
            <td>
                <div class="checkbox checkbox-inline checkbx">
                    <input name="data[<?php echo $editQues['EveChfQuestionsUser']['q_id']; ?>]['red']"  id="inlineCheckbox2" type="checkbox" <?php if($editQues['EveChfQuestionsUser']['red_high_val'] != "") echo "checked"; ?>>
                    <label for="inlineCheckbox2">Y</label>
                </div>
            </td>
            <td>
                <div class="checkbox checkbox-inline checkbx">
                    <input name="data[<?php echo $editQues['EveChfQuestionsUser']['q_id']; ?>]['alert']"  id="inlineCheckbox2" type="checkbox" <?php if($editQues['EveChfQuestionsUser']['alert_ind'] == "1") echo "checked"; ?>>
                    <label for="inlineCheckbox2">Y</label>
                </div>
            </td>
            <td><a href="javascript:;" class="save" name="<?php echo $editQues['EveChfQuestionsUser']['q_id']."_".$editQues['EveCarePlansList']['id']; ?>"><i class="fa fa-save"></i></a></td>
       </tr>
        <?php } } } else{ ?>

            <tr id="row_<?=$result['cq_id']?>">
                <th scope="row"><i class="fa fa-file-archive-o"></i></th>
                <td>
                    <div class="checkbox checkbox-inline checkbx">
                        <input name="data[<?php echo $result['cq_id']; ?>]['y_n']" id="checkbox0" type="checkbox" >
                        <label for="checkbox0"></label>
                    </div>
                </td>
                <td><?=$result['cq_question'] ?></td>
                <td>
                    <div class="checkbox checkbox-success checkbox-inline checkbx">
                        <input id="inlineCheckbox2" name="data[<?php echo $result['cq_id']; ?>]['green']" type="checkbox" value="Y">
                        <label for="inlineCheckbox2">Y</label>
                    </div>
                    <div class="checkbox checkbox-pink checkbox-inline checkbx">
                        <input name="data[<?php echo $result['cq_id']; ?>]['green']"  id="checkbox0" type="checkbox" value="N">
                        <label for="checkbox0">N</label>
                    </div>
                </td>
                <td>
                    <div class="checkbox checkbox-success checkbox-inline checkbx">
                        <input name="data[<?php echo $result['cq_id']; ?>]['orange']"  id="inlineCheckbox2" type="checkbox" value="Y">
                        <label for="inlineCheckbox2">Y</label>
                    </div>
                    <div class="checkbox checkbox-pink checkbox-inline checkbx">
                        <input name="data[<?php echo $result['cq_id']; ?>]['orange']"  id="checkbox0" type="checkbox" value="N">
                        <label for="checkbox0">N</label>
                    </div>
                </td>
                <td>
                    <div class="checkbox checkbox-inline checkbx">
                        <input name="data[<?php echo $result['cq_id']; ?>]['red']"  id="inlineCheckbox2" type="checkbox">
                        <label for="inlineCheckbox2">Y</label>
                    </div>
                </td>
                <td>
                    <div class="checkbox checkbox-inline checkbx">
                        <input name="data[<?php echo $result['cq_id']; ?>]['alert']"  id="inlineCheckbox2" type="checkbox">
                        <label for="inlineCheckbox2">Y</label>
                    </div>
                </td>
                <td><a href="javascript:;" id="<?php echo $result['cq_id'];?>" class="save" name="<?php echo $result['cq_id']."_".$carePlansList['EveCarePlansList']['id']; ?>"><i class="fa fa-save"></i></a></td>
           </tr>
<?php  } } }else{?>
        <tr>
        <td colspan='8' class="text-center"> No Questions Found</td>
        </tr>
    <?php } }?> 

Answer 1

在添加click事件侦听器之前，在顶部定义变量。然后在触发ajax事件之前检查运行状态。

var running = false;
$(document).on('click','.save',function() {
    if (running) {
        return false;
    }
    running = true;

    // Your ajax code here.
    $.ajax({
        ...
        success:function(resp){
            if(resp == "success"){
                alert("Data Saved");
            }
            running = false; // Note this line.
        },
        error : function (res) {
            console.log(res.responseText);
            running = false; // Note this line.
        }
    });
}

在上面的代码中，当第一次ajax触发时，它会生成running = true。直到那个ajax请求结束，其他错位的ajax被阻止。

现在这不是正确的做法。但它只是一个修复。你应该真正研究你的代码并找出为什么它会多次触发？您是否多次点击保存？或者是这样的？

希望这有帮助。

Answer 2

我通常做的是以下内容：

$(document).on('click','.save:not(.running)',function() {
    var self = this;
    $(this).addClass("running");    
    // Your ajax code here.
    $.ajax({
        ...
        success:function(resp){
            if(resp == "success"){
                alert("Data Saved");
            }
        },
        error : function (res) {                
        },
        complete: function () { 
            $(self).removeClass("running");
        }
    });
}

Answer 3

让您的代码动态且可重复使用 第1步：在帮助程序中创建函数

public function custom_plan_new_ajax($model, $selector = array()) {

    return $this->_View->Element('custom_plan_new_ajax', array(
                'model' => $model,
                'selector' => $selector
    ));
}

步骤2：在Element目录中创建custom_plan_new_ajax.ctp添加以下功能

$('#parentDivClassOrId').on('click','.save', function () {
        var id = $(this).attr('id');  
        var model="UserModel";
        var c = confirm('Are you sure you want to changes status?');
        if (c == true) {
            var url = "test.php";             
            $.post(url, {id: id, model:model'}, //You can add here multiple data or send in serialize form
            function (resp) {                   
                var res = jQuery.parseJSON(resp);                  
                if (res.status == true) {
                   //your code

                } else {
                    //your code
                }
            });
        } else {

            return false;
        }

    });

步骤3：在视图文件中调用

$this->yourHelperName->custom_plan_new_ajax($model, $selector = array());

如果您仍有问题，请在khan.rashid777@gmail.com

分享您的脚本