Как загрузить данные из PHP после капчи без перезагрузки страницы?

Ссылка скопирована
JavaScript MODX PHP
1 ответ

Приветствую.

Опишу ситуацию, чтобы было понятно.
Есть страница сайта. Перед ее отдачей работает код PHP. Этот код проверяет IP-адрес посетителя. Если с IP-адресом все нормально, то посетитель увидит перед собой страницу сайта. Если же IP-адрес попадает под фильтр, то вместо страницы посетитель увидит перед собой капчу. Ну, а как это обычно бывает: если посетитель решает капчу, то ему показывается страница, а если не решает — будет решать капчу до бесконечности, если не надоест, разумеется.

Я не пойму то, как можно отдать посетителю страницу после решения им капчи без перезагрузки страницы. Сайт работает на PHP.

Опишу текущую реализацию, чуть упростив ее сокращением кода.
Встроенный в страницу код проверки

// вот такой код выполняется перед показом страницы посетителю // если ip не подходит, то показываем ему капчу (captcha.html) // если ip нормальный, то показываем страницу (index.html) <?php // Проверка IP $ip = $_SERVER['REMOTE_ADDR']; if ($ip == "XX.XX.XX.XX") {     include 'captcha.html';     exit; } else {     // Блок else можно и не использовать     include 'index.html';     exit; }

// вот такой код выполняется перед показом страницы посетителю // если ip не подходит, то показываем ему капчу (captcha.html) // если ip нормальный, то показываем страницу (index.html) <?php // Проверка IP $ip = $_SERVER['REMOTE_ADDR']; if ($ip == "XX.XX.XX.XX") { include 'captcha.html'; exit; } else { // Блок else можно и не использовать include 'index.html'; exit; }

captcha.html

<!-- работает через яндекс.капчу --> <!-- капча запрашивает данные с сервера яндекса через js и вставляет их в атрибут --> <!-- полученные данные через js отправляют в php обработчик (request_response.php) --> <!doctype html> <html lang="en"> <head>     <script src="https://smartcaptcha.yandexcloud.net/captcha.js" defer=""></script> </head> <body>      <div         id="smart-captcha"         class="smart-captcha"         data-callback="check_token"     ></div>      <script>         function check_token(token) {             // получаю токен капчи из поля              var token_block = document.querySelector("#smart-captcha > input[type=hidden]");             var token = token_block.getAttribute("name");                          // формирую данные             var data = {};             data["token"] = token;              // отправляют данные в обработчик             fetch("request_response.php", {                 "method": "POST",                 "headers": {                     "Content-Type": "application/json; charset=utf-8"                 },                     "body": JSON.stringify(data)                 }).then(function(data) {                     console.log(data);                     if (data["passed"] == "passed") {                         // если капча пройдена, то перезагружаю страницу                         window.location.reload();                     }                 })           }     </script> </body> </html>

<!-- работает через яндекс.капчу --> <!-- капча запрашивает данные с сервера яндекса через js и вставляет их в атрибут --> <!-- полученные данные через js отправляют в php обработчик (request_response.php) --> <!doctype html> <html lang="en"> <head> <script src="https://smartcaptcha.yandexcloud.net/captcha.js" defer=""></script> </head> <body> <div id="smart-captcha" class="smart-captcha" data-callback="check_token" ></div> <script> function check_token(token) { // получаю токен капчи из поля var token_block = document.querySelector("#smart-captcha > input[type=hidden]"); var token = token_block.getAttribute("name"); // формирую данные var data = {}; data["token"] = token; // отправляют данные в обработчик fetch("request_response.php", { "method": "POST", "headers": { "Content-Type": "application/json; charset=utf-8" }, "body": JSON.stringify(data) }).then(function(data) { console.log(data); if (data["passed"] == "passed") { // если капча пройдена, то перезагружаю страницу window.location.reload(); } }) } </script> </body> </html>

request_response.php

// в обработчике отправляется запрос к серверу яндекса // яндекс может вернуть два ответа: все хорошо + что-то не то // если все хорошо, тогда надо показать посетителю страницу // и делаю я это, отправляя в скрипт о том, что все хорошо // скрипт перезагружает страницу, если все хорошо if(isset($_POST)){     // отправка запроса к яндексу     // получение ответа     // формирование json для ответа в js     // отправка ответа в js     echo json_encode($dats); }

// в обработчике отправляется запрос к серверу яндекса // яндекс может вернуть два ответа: все хорошо + что-то не то // если все хорошо, тогда надо показать посетителю страницу // и делаю я это, отправляя в скрипт о том, что все хорошо // скрипт перезагружает страницу, если все хорошо if(isset($_POST)){ // отправка запроса к яндексу // получение ответа // формирование json для ответа в js // отправка ответа в js echo json_encode($dats); }

И на этом шаге я застрял: получаю ответ из PHP-обработчика и перезагружаю страницу через JS. Хотелось бы при успешности прохождения капчи как-то отдавать страницу без ее перезагрузки через JS.

Предполагаю, что есть какая-то возможность на этапе проверки IP-адреса в условии if-else прервать выполнение показа страницы и показать ее после прохождения капчи. В PHP/JS я не силен. Подскажите, пожалуйста, решение, если оно есть.

Если это имеет значение, то сайт работает на MODX и PHP подключен к нему прямо в файле index.php командой include_once.

Дополнительно:

Непонятно, чем этот вопрос отличается от обычного "как загрузить и отобразить информацию аяксом без перезагрузки страницы"

  • А для тех кто не силен в программировании даже на уровне "найти пример в интернете и доработать под себя" есть фриланс биржи.
  • Ипатьев, аякс у него уже есть, он желает странного.
  • Алексей Уколов, ну и что, что есть? Кто мешает сделать еще один запрос на сервер?
    Не вижу ничего странного в изменении страницы без перезагрузки
  • Реализация, которую он сам себе придумал, с "остановить, а потом продолжить" - это действительно анекдот.
    Но обычный аякс запрос вполне решает его проблему.
  • Другое дело что затрачиваемые усилия не стоят результата. Обычный пользователь все равно не поймет, где у него перезагрузка, а где подгрузка, если на странице вся картинка меняется
  • Ипатьев, он и делает дополнительный запрос, но хочет от него отказаться. Ну, по крайней мере я так понял его «перезагружаю через JS». Может, конечно, речь идти и о банальном window.location.reload(), но раз там есть уже ajax с проверкой капчи, было бы странно не запрашивать контент страницы через него же.
  • А, код-то я не дочитал :)
    Действительно — reload…
  • Основной вопрос после прочтения всего что описано в топике - зачем?
    И чем отличается "продолжить загрузку" от "перезагрузить страницу" для меня как для пользователя?
  • да и MODX тут в общем-то вторичен
  • ThunderCat, Сложный вопрос. Мне кажется, что так просто чуть более дружелюбнее + пока идет проверка капчи, то можно как-то предзагрузить данные страницы, чтобы при прохождении капчи задержка между ее решением и показом страницы была минимальной + я не уверен, но при обновлении страницы яндекс.метрика может посчитать переход, не как внутренним.
  • weranda,

    пока идет проверка капчи, то можно как-то предзагрузить данные страницы,

    тогда зачем капча? Я и без капчи прочитаю все что у вас "предзагрузилось".

  • ThunderCat, в контексте вашего вопроса даже не знаю как ответить. Надо подумать...

    • Предполагаю, что есть какая-то возможность на этапе проверки IP-адреса в условии if-else прервать выполнение показа страницы и показать ее после прохождения капчи.

    Нет такой возможности.

    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Кирилл JS Ответ

    Для загрузки данных из PHP после прохождения капчи без перезагрузки страницы можно воспользоваться технологией AJAX. AJAX позволяет отправлять запросы на сервер без необходимости обновления всей страницы.

    Для начала необходимо создать HTML форму, в которой будет капча и поля для ввода данных. После прохождения капчи пользователем, мы будем отправлять данные на сервер с помощью AJAX.

    Пример HTML формы:

     
 
 
    <img src="captcha.jpg" id="captcha">
 
    <button type="button">Отправить</button>

    <img src="captcha.jpg" id="captcha"> <button type="button">Отправить</button>

    Далее добавим скрипт JavaScript, который будет отправлять данные на сервер и обрабатывать ответ:

    function sendData() {
    var data1 = document.getElementById('data1').value;
    var data2 = document.getElementById('data2').value;
    var captcha = document.getElementById('captchaInput').value;
 
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'process.php', true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 &amp;&amp; xhr.status == 200) {
            var response = xhr.responseText;
            // обработка ответа от сервера
            console.log(response);
        }
    };
    var params = 'data1=' + data1 + '&amp;data2=' + data2 + '&amp;captcha=' + captcha;
    xhr.send(params);
}

    function sendData() { var data1 = document.getElementById('data1').value; var data2 = document.getElementById('data2').value; var captcha = document.getElementById('captchaInput').value; var xhr = new XMLHttpRequest(); xhr.open('POST', 'process.php', true); xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = function() { if(xhr.readyState == 4 &amp;&amp; xhr.status == 200) { var response = xhr.responseText; // обработка ответа от сервера console.log(response); } }; var params = 'data1=' + data1 + '&amp;data2=' + data2 + '&amp;captcha=' + captcha; xhr.send(params); }

    На сервере (в файле process.php) необходимо обработать полученные данные и вернуть ответ:

    $data1 = $_POST['data1'];
$data2 = $_POST['data2'];
$captcha = $_POST['captcha'];
 
// проверка капчи
if($captcha == $_SESSION['captcha']) {
    // обработка данных
    // возвращаем ответ
    echo 'Данные успешно загружены!';
} else {
    echo 'Неверная капча!';
}

    $data1 = $_POST['data1']; $data2 = $_POST['data2']; $captcha = $_POST['captcha']; // проверка капчи if($captcha == $_SESSION['captcha']) { // обработка данных // возвращаем ответ echo 'Данные успешно загружены!'; } else { echo 'Неверная капча!'; }

    Таким образом, при нажатии на кнопку "Отправить" данные будут отправлены на сервер, обработаны и возвращен ответ, который будет отображен на странице без ее перезагрузки.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов Telegram Как диагностировать ошибку с подключением к прокси в мобильном приложении Telegram? 0 ответов