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

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

Я не являюсь сильным сторонником использования 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(); }); });