Проверка после использования AJAX и jQuery без отправки данных в другой файл

#php #jquery #ajax #forms #validation

#php #jquery #ajax #формы #проверка

Вопрос:

моя проблема — на данный момент — не в конкретном коде, а скорее в базовом понимании — я думаю.

Я хочу создать формуляр и использовать данные без обновления страницы, так что это приводит меня к AJAX.

Теперь мне всегда нужно создавать отдельный файл, который работает с данными, отправляемыми AJAX? Разве я не могу просто «захватить» данные и работать с ними на той же странице?

Я думаю, что я неправильно понял некоторые базовые концепции.

Я думал о чем-то подобном этому:

 <form id="load_filters_form">
  ..
</form>

<?php
  var_dump($_GET); // values from <form>
?>

<!-- AJAX, jQuery -->
<script>
  $("#load_filters_form").submit(function(event){

    event.preventDefault();

    $.ajax({

      type: 'get',
      data: $(this).serialize()
      success: function() {
        $("#load_filters_form")[0].reset(); 
      }

    });

  });
</script>
  

Комментарии:

1. Мне не совсем понятно, о чем вы спрашиваете. Вы можете использовать свои данные любым удобным для вас способом. Что именно не работает? Если ваша логика проверки находится на этой странице, то вы можете использовать эту логику без необходимости делать AJAX-запрос. (Примечание: Вы не должны неявно доверять какой -либо проверке на стороне клиента и все равно должны проверять на стороне сервера, прежде чем совершать какие-либо действия с этими данными.)

2. Чего я пытаюсь добиться, так это того, что мне не нужно перезагружать страницу, хотя данные все еще есть. Обычно я отправляю форму на ту же страницу, но это также перезагружает ее, верно?

3. Если вы используете AJAX, то текущая видимая страница не перезагружается. AJAX просто отправляет запрос на сервер в фоновом режиме (в коде) и обрабатывает ответ в коде. Я рекомендую вам просмотреть несколько примеров и руководств по AJAX, чтобы получить наглядное представление о том, что он делает.

4. Да, и я хочу обработать результат на той же странице. Разве это невозможно?

Ответ №1:

То, что вы предлагаете, безусловно, возможно, именно так работает AJAX. Вы делаете AJAX-запрос из кода JavaScript, отправляя любые данные, которые потребуются серверному коду, и обрабатываете ответ от сервера в своем коде JavaScript.

Проблема с тем, что вы предлагаете, заключается в том, что вы делаете это излишне сложным для себя. Подумайте, что ваш код в вопросе вернет к коду JavaScript в ответе AJAX. Он возвращает целую HTML-страницу, большая часть которой уже есть на клиенте.

Зачем повторно передавать все те данные, которые уже есть у клиента? Зачем на клиенте есть код для выделения данных, которые он ищет, из всей ненужной разметки вокруг этих данных?

Упрощайте свои операции. Если вам нужна операция на стороне сервера, которая получает данные, выполняет логику и возвращает результат, тогда создайте операцию, которая выполняет именно это. Вызовите эту операцию в AJAX и используйте полученные данные.

Теперь, возможно, этот ответ представляет собой структурированные данные JSON, которые ваш клиентский код может прочитать и соответствующим образом обновить пользовательский интерфейс. Или, возможно, этот ответ представляет собой необработанный HTML (не всю страницу, а, возможно, один <div> или любой другой контейнер, который представляет обновленную версию раздела страницы), который ваш клиентский код может напрямую перенести в пользовательский интерфейс.

Взаимодействие AJAX с сервером, как правило, должно быть легким. Если вы намеренно перезагружаете всю страницу в операции AJAX, тогда, ну, зачем вообще использовать AJAX? Суть в том, чтобы отправлять на сервер только те данные, которые ему нужны, и получать обратно с сервера только те данные, которые вам нужны. Например, если все, что вам нужно, это обновить список записей, отображаемых на странице, тогда вам не нужна вся страница или даже HTML-таблица записей, вам нужны только записи. JSON полезен именно для этого, возвращая клиенту структурированные данные и только структурированные данные. Затем клиентский код может преобразовать эти данные в структуру страницы.

Ответ №2:

Теперь мне всегда нужно создавать отдельный файл, который работает с данными, отправляемыми AJAX?

Да и нет. Вы можете отказаться от использования определенного файла, который извлекает ваш ajax, но вам действительно нужна какая-то связь между маршрутизацией и контроллером, поскольку большинство фреймворков ее создают.

Теоретически вы могли бы создать запрос к self (на той же странице), но это плохая логика. Вы собираетесь смешать внутреннюю логику с интерфейсом и очень быстро запутаетесь. Вам действительно нужно разделить все три элемента,

  • PHP принимает данные и обрабатывает их
  • JavaScript принимает данные и отображает их
  • Ваш html должен быть без кода; Просто довольно доработанный продукт.

Лучший шаблон проектирования — разделить эти файлы в их надлежащей среде.

Разве я не могу просто «захватить» данные и работать с ними на той же странице?

Не совсем, по крайней мере, не последовательно. Вы также должны иметь в виду, что это потенциальная проблема при попытке обслуживать два отдельных содержимого из одного и того же маршрута / файла:

 if ajax 
// do something
else
// do the other thing
  

Ajax не хочет полностью отрисованных HTML-файлов, это занимает слишком много времени; лучше всего обслуживать объекты / массивы JSON, которые будут отрисованы в вашем интерфейсе с помощью JavaScript; который также использовался для выполнения запроса — в браузере пользователя без задержек, вызванных их сетью или вашим сервером.

Нет надежного способа узнать, какой запрос является каким, поскольку никакие данные от клиента не заслуживают доверия, включая HTTP-заголовки; их легко подделать и они потенциально могут привести к безопасности / нежелательным результатам.

Таким образом, лучшим решением является наличие внешнего файла, к которому вы бы отправляли запросы, вместо того, чтобы делать это из него самого.