Как реализовать это через ajax+php?

153
24 февраля 2018, 22:29

Добрый вечер!

Мне нужно, чтобы выбранное значение из первого select'а отправлялось методом POST в php скрипт. В php скрипте, нужно чтобы запрос в бд пошёл именно так:

SELECT group FROM 21.02.18 ORDER BY group - там где 21.02.18 это именно то что мы выбрали в первом select'е.

Дальше php скрипт должен вернуть ответ из БД ( в нашем случае, список всех групп за это число ). И после этого нужно чтобы в select №2 появились пункты исходя из ответа от PHP скрипта.

Насколько я знаю, это реализовывается с помощью ajax+jquery+php, но как? Помогите пожалуйста :)

Ответ к Igor: мне бы примеры с ajax+php

Answer 1

Добрый вечер.

Странное у Вас имя для таблицы.

Ну а сделать то, что Вам надо можно так:

1) файл с формой и jquery

<form action="" id="forma">
 <select name="first" id="first">
   <option value='1'>1</option>
   <option value='2'>2</option>
   <option value='3'>3</option>
 </select>
 <select name="second" id="second"></select>
</form>
<script type="text/javascript>
  $('#first').on('change', function(){
    $.ajax({
      url: 'test.php',
      type: 'POST',
      data: $(this).val(),
      success: function(data){
        // получили ответ от сервера
        // вставили option во второй select
        //     ИЛИ
        //если вернулся массив, то
        // в цикле разобрали массив
        // сформировали option
        // вставили во второй список 
        $('#second').html(data)
      }
  })
</script>

2) файл test.php

 if(isset($_POST)){
   // получаете данные из формы
   // пишите запрос к базе
   // получаете ответ с результатом
   // формируете нужные option
   // отправляете назад в браузер
   //       ИЛИ
   // формируете массив с данными
   // отправляете назад
   echo '<option value="11">11</option>';
 }  

Option для второго списка можно сформировать на сервере или непосредственно на стороне клиента. Вот такой самый простой пример.

Answer 2

в общем и целом суть будет такова. первому селекту вы навешиваете обработчик изменения его значения.

 <select id="dateSelect">
      <option value="21.02.18">21.02.18</option>
      .....
 </select>

 $("#dateSelect").change(function(){
     var d = $(this).val();
     console.log(d);
 });

к этому моменту при смене значений в лог консоли будут выводится даты. Дописываем обработчик, и отправляем post-запрос на сервер

     var d = $(this).val();
     $.post("/groups.php", { date: d }, function(){
          //
     });

Этим кодом мы отправили запрос. Настало время обработать его на стороне пхп (groups.php). Тут мы должны тем или иным способом подключиться к БД, и так или иначе вернуть данные. Допустим мы используем PDO

$dbh = new PDO(....);
$sql = "select id, group from my_data_table where adate = :d";
$st = $dbg->prepare($sql);
$st->execute([':d' => $_POST['date']]);
$groups = $st=>fetchAll();

подготваливаем запрос, передаем дату с помощью параметров. В целом мы должны предварительно проверить, что нам на самом деле пришли данные (isset($_POST['date'])) и то, что там действительно дата checkdate(), обернуть работу с базой в try-catch и обработать возможные ошибки.

Теперь мы получили данные, и должны их вернуть клиенту. Можно использовать два варианта, первый - закодировать все в json, второй - вывести html разметку.

вариант с json

header("Content-type: Application/json");
echo json_encode($groups);

второй

foreach($groups as $g){ ?>
   <option value="<?= $g['id'] ?>"><?= $g['group']?></option>
<?}

Неплохо вообще познакомится с шаблонизаторами, и не писать echo-подобный код, ну или по крайней мере не смешивать логику выборки данных и вывода результатов в одном файле.

Возвращаемся к клиенту. Если выбрали первый способ, то дописываем коллбэк-функцию отправки запроса примерно так:

     $.post("/groups.php", { date: d }, function(groups){
          $("#groupsSel").empty();
          $.each(data, function(g){
               $("<option>").val(g.id)
                            .text(g.group)
                            .appendTo("#groupsSel");
          });
     });

Если выбрали второй путь то

     $.post("/groups.php", { date: d }, function(html){
         $("#groupsSel").html(html);
     });

собственно вкратце как-то так.

READ ALSO
Помощь с выражением preg_match php

Помощь с выражением preg_match php

Подскажите пожалуйста, как добавить в условие только латинские буквы, цифры, знак =, знак + и /

140
Как выводить изображение по GET запросу?

Как выводить изображение по GET запросу?

С GET я знаком, а вот как выводить jpg, txt, js и так далее, не умею

129
Доступ к данным в другом классе

Доступ к данным в другом классе

Добрый день! Вопрос по ООП на С++ (отредактировал, убрал наследование)

174
c++ list iterator is not dereferencable

c++ list iterator is not dereferencable

Есть отсортированный по алфавиту список с фамилиями, содержащийся в

185