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

У меня есть форма, в которой есть поле текстовой области. Я уже храню свои данные в таблицах, но теперь хочу показать результаты на одной странице с динамическим 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>

источник

2016-08-08 arash rahimi

Не могли бы вы показать нам код ? Что вы пробовали? Вы используете javascript-библиотеку? – vincenth

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

Нет Я не использую js –

Я не сильный сторонник в использовании рамки яваскрипта, однако, Аякса боль справиться без него, так вот пример используя 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: Ваш комментарий, я собрал вы хотите, чтобы перезагрузить страницу после отправки, Вы можете сделать это после того, как в конце вашего АЯКС запроса:

jQuery('#myForm').submit(function(e){ 
    e.preventDefault(); 

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

источник

2016-08-08 10:11:57 vincenth

bro tnx для вашего ответа, но я думаю, что вы не понимаете моего значения. Могу ли я иметь идентификатор вашей социальной сети, как скайп или приложение –

Не могли бы вы рассказать мне, что я неправильно понял. Я бы предпочел ответить на этом сайте, а не с каким-либо другим социальным значением, таким образом, ответ мог бы принести пользу кому-то другому. – vincenth

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

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

ответ

Смежные вопросы