Отправить данные без перезагрузки

Question

У меня есть форма и функция php, в одном файле. Как сделать так, чтобы при отправке данных страница не перезагружалась.

<form method="post" class="require_form" action="#">
                <input type="text" name="theme_id" hidden="true" value="'.$row['id'].'"/>
                <button type="submit" name="upp" class="open_modal btn btn-secondary save">REQUIRE</button>
            </form>


function showRequire($id)
{
    global $conn, $requirements;
    $sql = "SELECT * FROM `requirements` WHERE `id_projects`='$id';";
    $result = $conn->query($sql);
    if ($result->num_rows>0) {
        $rez= $result->fetch_assoc();
        $requirements=$rez['requirements'];
    } else {
        $requirements="Нет требований к данному проекту";
    }

    echo "<script type='text/javascript'>
        $(document).ready(function(){
        $('#exampleModalCenter').modal('show');
        });
        </script>";

}

Answer 1

Средствами PHP - никак. Вы можете реализовать это через AJAX.

Пример на ванильном JS.

<form method='post'>
    <input type='text' id='ajax-require'>
    <button type='button' id='send'> Отправка текстового поля AJAX запросом </button>
</form>

И сам JS код, который будет отправлять Ajax запрос:

<script>
//после загрузки DOM-дерева страницы
document.addEventListener("DOMContentLoaded",function() {
  //получить кнопку
  var mybutton = document.getElementById('send');
  //подписаться на событие click по кнопке и назначить обработчик, который будет выполнять действия, указанные в безымянной функции
  mybutton.addEventListener("click", function(){
    //1. Сбор данных, необходимых для выполнения запроса на сервере
    var name = document.getElementById('ajax-require').value;
    // 2. Создание переменной request
    var request = new XMLHttpRequest();
    // 3. Настройка запроса
    request.open('POST','/api/ajax',true);
    // 4. Подписка на событие onreadystatechange и обработка его с помощью анонимной функции
    request.addEventListener('readystatechange', function() {
      //если запрос пришёл и статус запроса 200 (OK)
      if ((request.readyState==4) && (request.status==200)) {
        // например, выведем объект XHR в консоль браузера
        console.log(request);
        // и ответ (текст), пришедший с сервера в окне alert
        console.log(request.responseText);
        // получить элемент c id = welcome
        var welcome = document.getElementById('welcome');
        // заменить содержимое элемента ответом, пришедшим с сервера
        welcome.innerHTML = request.responseText;
      }
    });
    // Устанавливаем заголовок Content-Type(обязательно для метода POST). Он предназначен для указания кодировки, с помощью которой зашифрован запрос. Это необходимо для того, чтобы сервер знал как его раскодировать.
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    // 5. Отправка запроса на сервер. В качестве параметра указываем данные, которые необходимо передать (необходимо для POST)
    request.send(name);
  });
});
</script>

Там где:

// 3. Настройка запроса
    request.open('POST','/api/ajax',true);

необходимо указать свои параметры, метод отправки запроса (POST, GET, PUT) и ссылка на обработчик.

БЛОГ НА HUSL

Отправить данные без перезагрузки

Ответы (1 шт):