Почему мои запросы API отменяются в javascript (расширение Chrome)

Я разрабатываю расширение для Chrome. Я хочу, чтобы функция вызывалась одним нажатием кнопки. Я сделал это, как показано ниже, если я передам его как «createurl()» для функции onclick, он выполнит вызов API, даже если кнопка не нажата. Если функция указана просто как «createurl», тогда запрос API отображается как «отмененный» хромом. Итак, как мне преодолеть эту ошибку?

[Учитывая, что API работает нормально и принимает все запросы]

всплывающее окно.html

~~other neccesary things and~~

<form>
   <button class="scrollto">Shorten It</button>
</form>

всплывающее окно.js

document.querySelector(".scrollto").onclick = createurl
function createurl(){
    var data = new FormData();
    var form = document.querySelector("form");
    var xhr = new XMLHttpRequest();
    xhr.withCredentials = true;
    xhr.addEventListener("readystatechange", function () {
    if (this.readyState === 4) {
        myObj = JSON.parse(this.responseText);
    }
    });
    xhr.open("POST", "https://mydomain/api.php");
    xhr.send(data);
}

manifest.json

~~other neccesary things and~~

"permissions": [
    "*://*/*",
    "webNavigation",
    "cookies",
    "https://mydomain/",
    "activeTab"
  ]

javascript google-chrome-extension
person Nithin S    schedule 19.05.2020    source источник
comment
Поскольку отправка формы вызывает передачу страницы, которая отменяет любые текущие запросы ajax.   -  person Taplar    schedule 19.05.2020
comment
@Taplar, если его button.onclick = createurl() , вызов API работает, но он выполняется до нажатия кнопки. Чтобы решить эту проблему, я изменил его на button.onclick = createurl. Теперь функция вызывается при нажатии кнопки. Но вызов API отменяется хромом в этом вызове функции.   -  person Nithin S    schedule 19.05.2020
comment
Прочитайте ответ ниже. Он повторяет то, что я сказал.   -  person Taplar    schedule 19.05.2020

Ответы (1)


arrow_upward
2
arrow_downward

По умолчанию <button> выполняет отправку, что заставляет браузер уйти со страницы (возможно, вернуться на ту же страницу).

Если вы хотите, чтобы он просто действовал как место для обработчика событий, вам нужно использовать type="button":

<form>
   <button class="scrollto" type="button">Shorten It</button>
</form>
person JLRishe    schedule 19.05.2020