Question

我已经实现了一个绑定到按钮的简单AJAX调用。单击时，该调用从处获取输入，然后使用getJSON将值转发到FLASK服务器。使用提供的值（URL），将请求发送到网站，并将网站的html发送回。

问题在于AJAX调用似乎多次运行，具体取决于单击它的次数。

示例；

（单击） 1个（点击） 2 1个（点击） 3 2 1

因为我正在将请求从FLASK服务器发送到另一个网站，所以它实际上看起来像是在尝试对服务器进行DDOS。知道如何解决这个问题吗？

我的AJAX代码；

var requestNumber = 1; //done for testing purposes

    //RUNS PROXY SCRIPT
    $("#btnProxy").bind("click", function() . //#btnProxy is the button
        {
     $.getJSON("/background_process", //background_process is my FLASK route
                   {txtAddress: $('input[name="Address"]').val(), //Address is the input box
                   },
                   console.log(++requestNumber), //increment on function call
                   function(data)
                   {$("#web_iframe").attr('srcdoc', data.result); //the FLASK route retrieves the html of a webpage and returns it in an iframe srcdoc.
                   });
        return false;
    });

我的FLASK代码（虽然可能不是原因）

@app.route('/background_process')
def background_process():
    address = None
    try:
        address = request.args.get("txtAddress")
        resp = requests.get(address)
        return jsonify(result=resp.text)

    except Exception, e:
        return(str(e))

我的测试输出的图像（我压制了FLASK脚本）

https://snag.gy/bikCZj.jpg

Answer 1

您可以尝试使用preventDefault()，看看它是否符合您的需求。

  $("#btnProxy").bind("click", function(e) {
    e.preventDefault();

   $.getJSON("/background_process", 
                 {txtAddress: $('input[name="Address"]').val(),
                 },
                 console.log(++requestNumber),
                 function(data)
                 {$("#web_iframe").attr('srcdoc', data.result);
                 });
      return false;
  });

Answer 2

可能您多次绑定了click事件。

$("#btnProxy").bind("click", function() { ... } );

可能的解决方案替代方法：

a）仅在文档加载时绑定click事件：

$(function() {
    $("#btnProxy").bind("click", function() { ... } );
});

b）使用setTimeout和clearTimeout过滤多个调用：

var to=null;
$("#btnProxy").bind("click", function() {
    if(to) clearTimeout(to);
    to=setTimeout(function() { ... },500);
});

c）在设置呼叫之前清除其他绑定：

$("#btnProxy").off("click");
$("#btnProxy").bind("click", function() { ... } );

Answer 3

最简单的操作之一是在第一次单击后禁用该按钮，仅在AJAX调用完成后才启用它：

var btnProxy = $("#btnProxy");
//RUNS PROXY SCRIPT
btnProxy.bind("click", function ()  //#btnProxy is the button
{
    btnProxy.attr('disabled', 'disabled');//disable the button before the request
    $.getJSON("/background_process", //background_process is my FLASK route
        {
            txtAddress: $('input[name="Address"]').val(), //Address is the input box
        },
        function (data) {
            $("#web_iframe").attr('srcdoc', data.result); //the FLASK route retrieves the html of a webpage and returns it in an iframe srcdoc.
           btnProxy.attr('disabled', null);//enable button on success
        });
    return false;
});

AJAX on Button Click逐步运行

3 个答案: