AJAX при нажатии кнопки запускается постепенно

Question

Я реализовал простой вызов AJAX, связанный с кнопкой.При щелчке вызов принимает входные данные и перенаправляет значение на сервер FLASK с помощью getJSON.Используя предоставленное значение (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

Возможно, вы связываете событие щелчка несколько раз.

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

Возможные варианты решения:

a) Привязка события щелчка только при загрузке документа:

$(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 2

Одна из самых простых вещей - отключить кнопку после первого щелчка и включить ее только после завершения вызова 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;
});

Answer 3

Вы можете попробовать с 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;
  });