Обновлять Div автоматически с помощью JQuery, когда новая запись добавлена ​​в базу данных MySql

Я создаю сайт социальных сетей для своих друзей. я хотел знать, как я обновил Div, содержащий несколько вставленных записей базы данных, когда новая запись будет добавлена ​​в базу данных. Короче, вы, должно быть, видели живые уведомления в facebook, которые исчезают, когда кто-то что-то делает. это происходит без обновления всего живого уведомления div. только новое уведомление добавляется к div.

Я хотел бы сделать это с помощью jquery и AJAX, поскольку у меня есть хорошее знание о них. и PHP как серверный язык.

Заранее спасибо.

PS: Я искал много сайтов для решения, но не смог найти его нигде. Я даже пробовал использовать исходный код facebook, но не смог найти его там тоже! Надеюсь, кто-то поможет мне здесь! * скрещенные пальцы *

В основном это выглядит примерно так:

Создайте функцию javascript на своей странице, которая делает вызов ajax (с jquery или native xhr или что не так) на php-страницу. Страница php отслеживает «новый материал» и возвращает его при вызове. Функция js при получении данных добавляет новые метки (divs или что-то еще) в панель уведомлений. Функция вызывается каждый раз с помощью функции setTimeout javascript.

Если некоторые из этих шагов вас смущают, задайте более конкретный вопрос.

Вы можете использовать Ajax Push для отправки уведомлений о том, что сообщение обновлено, или вы можете сделать его нажатием. Последнее, вероятно, было бы проще для вас, если вы уже знаете jquery и Ajax с PHP.

Периодически проверяйте новые записи на интервале (например, с помощью setInterval ), и если вы их найдете, загрузите их в DOM и затушите их. Интервал не должен быть очень маленьким и ненужным. Возможно, что-то длинное как каждые 30 секунд.

 setInterval('checkForUpdates', 30000); var lastTime = (new Date()).getTime(); function checkForUpdates() { $.get('/php-page-that-checks-for-updates.php?timestamp=' . lastTime , function (results) { if (results) { /* fade into dom */ } } ); lastTime = (new Date()).getTime(); } 

Страница PHP:

 $timestamp = $_REQUEST['timestamp']; $results = query('SELECT post FROM posts WHERE postTime > "$timestamp"'); echo fetch($results); 

Как и другие, вы также можете отмечать сообщения как «прочитанные» и использовать это как индикатор вместо метки времени, что также поможет решить проблему с часовым поясом с моим примером. Я бы не хотел добавлять дополнительный столбец только для этого, но если у вас уже есть одна по другой причине, это будет хорошая идея.

EDIT: Это довольно старый ответ, но если вы все еще можете это сделать, я бы использовал WebSockets вместо любого длинного опроса ajax. Я не думаю, что PHP – отличный язык (я бы предложил использовать socket.io с Node.js), но это возможно.

Вы можете использовать метод $.getJSON() jQuery для доступа к странице PHP. Эта страница PHP будет захватывать все непрочитанные уведомления (вы можете добавить столбец в свою таблицу уведомлений с именем «читать» и установить для него 0 для непрочитанных и 1 для непрочитанных) и вернуть их как канал JSON.

Разберите JSON и сделайте каждый из них div, который отображается на странице. Затем заверните это все в setInterval() и запустите его каждые миллисекунды (или полсекунды, или четверть секунды, это зависит от вас).

Кроме того, чтобы пометить их как прочитанные, настройте событие click на этих div s, которое вы создали из фида уведомлений JSON. По клику он свяжется с другой страницей PHP (вы можете использовать $.post или $.get ), который, например, получит id уведомления, а также измените столбец read на 1.