Как в фоне посылать url запрос?

Question

[dieneri]

Есть обыкновенная кнопка на обычной странице html

<button type="button" id="button">Голосовать</button>

Как при нажатии на неё оставаться на текущей странице, но чтобы в фоне выполнился запрос переход на https://test.ru/?

Дело в том, что у меня веб-приложение и я хочу сделать рычаг в виде оценки рейтинга.
Т.е. выставил 5 звёзд клиент и нажал "Голосовать", по идее должно сработать обращение "https://test.ru/?id=5&rating=5"
Но без перехода для клиента на данную страницу..

Как сделать на javascript или его фреймворке, не прибегая к php?

Answer 1

[Александр]

button.addEventListener('click', (event) => {
    event.preventDefault();
    fetch('https://test.ru/?id=5&rating=5');
});

Comments

[dieneri]

Спасибо. Научите вдобавок, как отследить через console log работу запроса? Посмотреть, отправился ли он. Понятно, что невозможно посмотреть, исполнился ли он.

[Александр]

dieneri, я полагаю, лучше почитать это.

Answer 2

[zkrvndm]

Вот еще один вариант:

<button onclick="fetch('https://test.ru/?id=5&rating=5')" type="button" id="button">Голосовать</button>

При клике будет выполнен код внутри атрибута onclick, а он (код) уже сделает фоновый запрос.

https://msiter.ru/references/html-reference/events...

Comments

[dieneri]

А можно, после отправки запроса скрывать кнопку? Могу нажать после клика, но это не совсем верно, наверное.. Было бы вернее скрывать, когда запрос действительно отправлен и мы как-то получили ответ, либо точно знаем, что есть сеть и мы послали его

[zkrvndm]

dieneri, попробуй так:

<button onclick="(async btn => { console.log('Результат голосования:', await (await fetch('https://test.ru/?id=5&rating=5')).text()); btn.style.display = 'none'; })(this);" type="button" id="button">Голосовать</button>

Но конечно обычно такие длинные функции выносят наружу, но если вам удобно можете внутри кнопки оставлять.