PHP Lang
  1. PHP Lang
  3. Как отправить данные формы и динамически отобразить их с помощью ajax на одной странице
Intereting Posts
PHP Session хранит поведение в переменных? Проверьте, является ли String ALL CAPS в PHP Невозможно использовать возвращаемое значение функции в контексте записи Как преобразовать объект в массив без префикса имени класса в PHP? Предупреждение: session_start (): failed: Permission denied (13) PHP: подтверждение номеров телефонов в США Как использовать переменную функции в другой функции того же класса -Codeigniter Как сохранить форматированный текст в таблице MySQL? Почему я продолжаю получать сообщение об ошибке php с непредвиденным «)» в инструкции FOR? Файлы php и xps Расширение 7z для php? Вызов функции-члена whereHas () для не-объекта в laravel Laravel 5: Нарушение ограничения целостности: 1452 Невозможно добавить или обновить дочернюю строку: ограничение внешнего ключа не выполняется Отдельное здание от развертывания с помощью Хадсона nl2br () эквивалентно в javascript

Как отправить данные формы и динамически отобразить их с помощью ajax на одной странице

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

<form action='' method='post''> <div class="form-group"> <label for="comment"></label> <textarea class="form-control" rows="5" id="comment" name='message_content' required></textarea> </div> <button type='submit' class='btn btn-default' name='send_msg'> send</button> </form>

Я не являюсь сильным сторонником использования javascript-фреймворка, однако ajax – это боль, с которой можно справиться без него, так что вот пример использования JQuery, но можно сделать более или менее то же самое с любой другой структурой.

Первым шагом является перехват события отправки, затем получение данных формы, выполнение запроса ajax и отображение результатов в div. 

 <!DOCTYPE doctype html> <html> <head> </head> <script src="jquery-3.1.0.min.js"> </script> <script> jQuery( document ).ready(function() { jQuery('#myForm').submit(function(e){ e.preventDefault(); jQuery.ajax({ url: e.currentTarget.action, data:{ comment: jQuery('#comment').val() } }).done(function(data){ console.log(data); jQuery('#display-data').append(data); }); }); }); </script> <body> <form id="myForm" action="getData.php" method="post"> <div class="form-group"> <label for="comment"> </label> <textarea class="form-control" id="comment" name="message_content" required="" rows="5"> </textarea> </div> <button class="btn btn-default" name="send_msg" type="submit"> send </button> </form> <div id="display-data"></div> </body> </html>

EDIT: Из вашего комментария, я собрал вас, чтобы перезагрузить страницу после отправки, вы можете сделать это после того, как в конце вашего запроса ajax: 

 jQuery('#myForm').submit(function(e){ e.preventDefault(); jQuery.ajax({ url: e.currentTarget.action, data:{ comment: jQuery('#comment').val() } }).done(function(data){ document.location.reload(); }); });