Обновление div из php без перегрузки страницы

134
04 июля 2019, 12:00

Хочу сделать простенький чат. Примерно должно работать так:

<script type="text/javascript">
$(document).ready(function () { 
   $("#div_comments").load("chat.php"); 
});
function show_chat() {
   $("#div_comments").load("chat.php");
   }; 
</script>
<div id="div_comments">
<!-- тут выводятся сообщения -->
</div>
<form method='post' action="chat.php">
   <input id='username' name='username' type='text' placeholder='Ваше имя'>
   <input id='message' name='message' type='text' placeholder='Сообщение'>
   <button id='submit' name='submit' type='submit' onClick="show_chat(); return false;" />
<form>

chat.php (схематично)

$name= $_POST['name'];
$message = $_POST['message'];     //  получаем данные из формы
mysql = "INSERT name, message";   //  пишем их в базу
$comments = mysql ("SELECT * ");  //  читаем из базы всё что есть
echo '<p>'.$comments.'</p>';      //  выводим 

Я пробовал разные вариации, уже запутался. Не удавалось добиться, чтобы php работал. Если там просто написать

<p>message</p>

тогда оно отрисовывается. А если

<?php
echo 'message';
?>

тогда ничего нет. А кнопка отправки так вообще не работает. Поправьте, пожалуйста.

Добавил после Ваших комментариев:

Создал два файла в корне пустого сайта:

index.html

<script type="text/javascript">
function show_chat(btn) {
   $("#div_comments").load("chat.php", $(btn).closest("form").serialize());
}
</script>
<h>ЧАТ</h>
  <div id="div_comments">
<!-- тут выводятся сообщения -->
</div>
<form>
   <input id='username' name='username' type='text' placeholder='Ваше имя'>
   <input id='message' name='message' type='text' placeholder='Сообщение'>
   <button id='submit' name='submit' type='button' onclick='show_chat(btn)'>Click<button>
</form>

chat.php

<?php
$name = $_GET['username'];
$message = $_GET['message'];
echo '<p>'.$name.'</p>'; 
echo '<p>'.$message.'</p>'; 
?>

Кнопка нажимается, параметры в адресной строке появляются, поля ввода очищаются и на этом всё.

Igor, насчет работы с базой данных, спасибо, я это всё умею, просто не хотел загромождать код здесь, написал же "схематично". Да оно пока и неважно.

Answer 1

http://api.jquery.com/load/

function show_chat(btn) {
  var data = $(btn).closest("form").serialize();
  console.log("show_chat", data);
  $("#div_comments").load("chat.php", data, function(response, status, xhr) {
    console.log("complete", response, status, xhr);
  });
}
<button id='submit' name='submit' type='button' onclick="show_chat(this)">Click</button>
$name = $_GET['username'];
$message = $_GET['message'];
mysql = "INSERT name, message";   //  пишем их в базу

Вы все-таки почитайте, как "писать в базу" хоть что-нибудь.

$comments = mysql ("SELECT * ");  //  читаем из базы всё что есть

... и как читать - тоже.

Давайте разбираться. Вы говорите:

Кнопка нажимается, параметры в адресной строке появляются, поля ввода очищаются и на этом всё.

То, что Вы описываете, соответствует сабмиту формы и перезагрузке страницы. Хотя с type='button' этого происходить не должно. На странице есть еще формы?

У меня был еще пропущен слэш в закрывающем тэге кнопки.

READ ALSO
Регулярное выражения

Регулярное выражения

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

123
как соединить два файла?

как соединить два файла?

создал два файла gamecpp game

144
тонкости указателя на массив

тонкости указателя на массив

Известно, что если не иметь оператора sizeof то кол-во элементов массива возможно посчитать, например, так:

134
Преобразование строки типа std::u16string к нижнему регистру

Преобразование строки типа std::u16string к нижнему регистру

Требуется преобразовать строку с кириллицей типа std::u16string к нижнему регистру

118