Как с помощью AJAX jQuery и php сделать отправку данных(комментарии) формы в БД и вернуть их без перезагрузки страницы?

Question

[Yevhenii K]

Добрый вечер!Пожалуйста, помогите новичку. Хочу переделать комментарии на своем сайте, нужно, что б добавлялись и выводились без перезагрузки страницы. JS не знаю, из за чего возникли проблемы со скриптом jQuery. Знаю что нужно событие клик, по которому будет выполнена функция с ajax post. Получилось только вот это,

$('form').on('submit', function(){
  $.post("test1.php",
  {
   //даннЫе
  }
);
});

не могу понять как записать отправленные данные в JS script и передать их в php.
Тоже, самое и как полученные с БД данные передать в JS для вывода на сайте.
Помогите решить проблему.
Форма

<form method="POST" action="php/scripts/add_coment.php">
	<textarea rows="2" cols="45" name="comment"></textarea>
	<input type="text" hidden="hidden" name="login" value="{$_SESSION['login']}">
	<input type="text" hidden="hidden" name="user_id" value="{$_SESSION['user_id']}">
	<input type="text" hidden="hidden" name="news_id" value="{$_SESSION['news_id']}">
	
	<button type="submit">Отправить</button>
</form>

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

P.S. Как решить часть php понимаю, а вот с JS скриптом и передачей данных между php и js проблема. Помогите, заранее спасибо.

Answer 1

[Andrey Dyrkov]

Вам нужно создать файл php который будет обрабатывать данный запрос. Например ajax-form-comment.php. В нём вы описываите на php всю логику получения данных. Просто берёте всё из массива post. С помощью AJAX вы формируете запрос, файл php получает запрос от ajax, обрабатывает там, в БД добавляет комент и с помощью echo выводит ответ, например текст "Всё круто, записали коммент!" или в формате JSON. В функцию callback success или done (смотря какую вы будите использовать) придут эти данные как раз. И в ней вы опишите логику, например отрисовку данного добавленного комента (вам нужно лишь от сервера получить подтверждение что коммент попал в базу, а данные использовать теже что и отправляли AJAX-ом ранее на сервер). Если нужен код, то могу написать js часть.

$('form').on('submit',function(){//используйте id лучше
  e.pereventDefault();//блокируем действия по умолчанию, чтобы не перезагружать страницу
  var data;//записываем сюда данные которые хотим передать
  $.ajax({
    url:'file.php',
    data:data,//наши данные которые передадим
    method:'POST',//метод
    dataType:'text/plain',
  }).done(function(data){//допустим сервер будет возвращять JSON {isError="true",message="Всё записалось"}
    //описываем действия по получению ответа сервера
    if(data.isError==true){
      //коммент записался
      page.render(data);//отрисовываем наш комент с переданными рание данными
    }
  }).fail(function(err){
    //обрабатываем ошибку ajax
    
  });
});

В php всё ещё проще, просто массив разбераите, работаите с базой и echo возвращаите данные обратно)

Answer 2

[Super User]

Как-то так:

$('form').on('submit', function(e){
  e.preventDefault(); //подавляем отправку данных формы и перезагрузку старницы
  var data = this.serialize();
  $.post("test1.php", data, function(json){
    $('.commentbox').append('<div><span>' + json.author + '</span><p>' + json.comment + '</p></div>'); 
  });
);
});

Это в простейшем виде. На самом деле зависит от разметки, требований и реализации на сервере.
UPD: Если с jQuery на Вы, то реализовать самому все это будет трудно.