第二次调用后Ajax重复请求

Question

我有一个HTML页面和链接。所以每个链接调用div内的一个新页面（#start_buttons_container）。

这是我的jquery ajax脚本

$(document).ready(function(){

    var loading = "<img src='css/images/loading.gif'/>";


    $('.start_buttons').click(function(){
        alert('request');
        var hrefname = $(this).attr('href').split(' ');
        var urlname = "parts/"+hrefname;
        $.ajax({

            url: urlname,
            cache: false,

            beforeSend: function() {
            $('#start_buttons_container').html(loading);
            },

            success: function(data){
              $("#start_buttons_container").html(data);
              $("#start_buttons_container").show(200);

            }

        });

        return false;
    });
});

我正在使用此代码并且对我有用。但是当我第二次点击链接时，警报发生了2次，如果我点击第3次，警报就会发生3次。

我的问题：如果用户点击链接20次，我怎么能停止重复请求？

更新：

<div class="form">

    <table border="0" align=center cellspacing="15" cellpadding="5">
        <tr class="tr1">

                <td align="left"><a class="button1 start_buttons" href="new-project.php">New Project</a></td>
                <td align="left"><a class="button1 start_buttons" href="user_projects.php">Import</a></td>
        </tr>
    </table>

    <div id="start_buttons_container">
    </div>

</div>
<script type="text/javascript" src="js/main.js"></script>

注意：

正如我在多次点击按钮后描述的那样，Ajax开始响应以后，站点开始工作几乎没有。但我发现了一件事。如果我不使用js外部URL（js / main.js）并将在下面的HTML代码中编写js代码，Ajax工作正常，即使你点击100次也会很快响应。为什么？

Answer 1

您将main.js包含在正在加载的AJAX HTML文件中。当您从DOM重新加载或清除HTML时，它仍然保留脚本。将脚本移出，使其不是正在加载的HTML的一部分。

Answer 2

如果我理解正确，你想要防止多个同时的ajax请求。试试这个：

$(function(){

    var loading = "<img src='css/images/loading.gif'/>",
        pending;


    $('.start_buttons').click(function(e){
        e.preventDefault(); //instead of return false
        if(pending) { //there is an ajax request running
           return; //do nothing
        }
        alert('request');
        var hrefname = $(this).attr('href').split(' ');
        var urlname = "parts/"+hrefname;
        pending = true; //mark as running            

        $.ajax({

            url: urlname,
            cache: false,

            beforeSend: function() {
            $('#start_buttons_container').html(loading);
            },

            success: function(data){
              $("#start_buttons_container").html(data);
              $("#start_buttons_container").show(200);
              pending = false; //mark as not running
            }

        });
    });
});

如果你想中止已经运行的那个试试这个。

$(function(){

    var loading = "<img src='css/images/loading.gif'/>",
        pending;


    $('.start_buttons').click(function(e){
        e.preventDefault(); //instead of return false
        if(pending) { //there is an ajax request running
           pending.abort();
           return; //do nothing
        }
        alert('request');
        var hrefname = $(this).attr('href').split(' ');
        var urlname = "parts/"+hrefname;            

        pending = $.ajax({

            url: urlname,
            cache: false,

            beforeSend: function() {
            $('#start_buttons_container').html(loading);
            },

            success: function(data){
              $("#start_buttons_container").html(data);
              $("#start_buttons_container").show(200);
              pending = undefined; //clear current request
            }

        });
    });
});

Answer 3

单击时修复重复请求ajax

$('.start_buttons').unbind().bind('click', function(event){
    event.preventDefault();
    //.....
});

Answer 4

这是jsfiddle的代码：

$(document).ready(function(){
var count = 0;
    var loading = "<img src='css/images/loading.gif'/>";


    $('.start_buttons').click(function(){
        count++;
        if (count > 19) {
        return;
        }
        alert('request'+count);
        var hrefname = $(this).attr('href').split(' ');
        var urlname = "parts/"+hrefname;
        $.ajax({

            url: urlname,
            cache: false,

            beforeSend: function() {
            $('#start_buttons_container').html(loading);
            },

            success: function(data){
              $("#start_buttons_container").html(data);
              $("#start_buttons_container").show(200);

            }

        });

        return false;
    });
});