Как php задействовать в ajax

[AndreyKaO]

Здравствуйте уважаемые форумчане. У меня возникла проблема, я впервой знакомлюсь с ajax, как знаю через него можно убрать обновление страницы, когда у формы метод «POST». У меня как работает, я нажимаю на кнопку с именем «click» он мне прибавляет число записанное в бд. Оно всё работает, но каждый раз, когда я нажимаю на кнопку происходите обновление страницы. Как исправить это с помощью ajax?

if(isset($_POST['click']))
    {
        mysqli_query($connect, "UPDATE `Accounts` SET `Click`= `Click` + `UpdateClick` WHERE `Login` = '$Check'");
    }

<form method = "POST">
            <center><button id = "btn" name="click"><img src="Assets/Images/clicker.png" style="width:200px;"></button></center> 
            <button name = "update" class = "update">Улучшить уровень</button>
            </form>

Хотелось бы, чтоб объяснили с примером, потому что не понял вообще как это. Буду очень благодарен вам.

[Nexus]

Почитайте:
https://developer.mozilla.org/en-US/...ormData_object
https://pqina.nl/blog/async-form-pos...la-javascript/

[Nexus]

На русском ничего адекватного не нашел.

По сути алгоритм работы должен быть примерно таким:
1. вешаете на формы слушатель события submit;
2. в слушателе глушите событие по умолчанию;
3. собираете с формы нужные данные;
4. блокируете кнопки type=submit;
5. отправляете асинхронный запрос к серверу;
6. после получения ответа разблокируете кнопки type=submit;
7. делаем что-нибудь в зависимости от успешности запроса (например вывести на странице уведомление и сбросить данные формы).

[AndreyKaO]

Так, думал в строк 5-6 делается, а там целая функция. Не подойдёт похоже такое. Всё равно спасибо)

[Nexus]

Так, думал в строк 5-6 делается, а там целая функция.

Если библиотека jquery подключена, то делается все действительно в несколько строк, иначе либо самому писать решение, либо искать уже готовые.

jq:

$('form').on('submit', function (e) {
    e.preventDefault();

    const $form = $(this);

    $form.find('[type="submit"]').prop('disabled', true);

    $.ajax(this.action, {
        method: this.method || 'post',
        data: $form.serialize(),
        completed: () => {
            $form.find('[type="submit"]').prop('disabled', false);
        },
        success: response => {
            $form.get(0).reset();
        }
    });
});

[AndreyKaO]

Всё хорошо, кнопка блокируется, но само действие не выполняется.

[Nexus]

AndreyKaO, откройте консоль и посмотрите есть ли ошибки и отправляется ли запрос.

https://learn.javascript.ru/devtools

[AndreyKaO]

Nexus, пустая.

[Nexus]

AndreyKaO, откройте devtools (в Chrome: F12), вкладка Console.
Нажмите в форме на кнопку "улучшить уровень".
Если в консоли ошибок не появилось, откройте вкладку Network, примените фильтр «XHR», найдите только что отправленный запрос и посмотрите, что было отправлено, куда, каким методом и что на запрос ответил сервер.

[AndreyKaO]

Ответ 200 OK
Метод POST.