Как реализовать ajax запрос?

254

07 февраля 2019, 13:20

Есть таблица

`echo "<td>
<form action='/teacher/saveocenka' id ='form1' method='Post'><input type='hidden' value='".$row['ID']."' name='studid'>
    <input type='hidden' value='1' name='day'>
    <select name='ocenka' required id='idcat'><option selected>".$row['C1']."</option><option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='Н'>H</option>    
    </select><input type='submit' value='ok'> </form></td>";}`

таких 31, при нажатии на кнопку "ОК" отправляется данные и обновляет в таблице БД. Как можно реализовать это через ajax? Если через ajax то я должен дать id для каждой формы и должен писать скрипт для каждой формы? их у меня будет 31

Answer 1

Что бы избежать перечисления id каждой формы добавьте произвольный класс к форме например .ajax-form и привяжитесь к событию .submit().

Что бы взять все данные из формы и передать их в ajax запрос используйте функцию serialize().

Так же не забудьте использовать .preventDefault() что бы не срабатывала стандартная отправка формы.

Пример кода

$(".ajax-form").submit(function(e) { 
  e.preventDefault(); // избегаем отправки формы 
   
  var form = $(this); 
  var url = form.attr('action'); 
   
  $.ajax({ 
    type: "POST", 
    url: url, 
    data: form.serialize(), // Сериализуем элементы формы. 
    success: function(data) { 
      alert(data); // показать ответ от скрипта php. 
    } 
  }); 
 
});

Оригинал