Как мгновенно отобразить данные после отправки формы, используя jQuery и AJAX?

Question

У меня есть форма PHP, которая использует jQuery / AJAX для отправки данных в таблицу базы данных MySQL.В настоящее время у меня отображается сообщение «Готово!»после отправки формы, но вы хотите, чтобы фактические данные мгновенно отображались после ее отправки.У меня есть настройка цикла для отображения ранее добавленных сообщений в div с именем класса 'msg_container', и я хотел бы, чтобы новые данные отображались в одном из этих div после отправки формы.

Как лучше всего это сделатьэтот?Любая помощь будет принята с благодарностью!

index.php javascript

<script type="text/javascript">
    $(document).ready(function () {

        $(".button").click(function () {

            var user_id = $("textarea#uer_id").val();
            var msg = $("textarea#msg ").val();
            var dataString = 'user_id=' + user_id + '&msg=' + msg;

            $.ajax({
                type: "POST",
                url: "add.php",
                data: dataString,
                success: function () {
                    alert("Done!")
                }
            });
            return false
        });
    });
</script>

index.php query

$user_id = $_GET['user_id'];

require_once('../../includes/connect.php');

$dbh = get_dbh($_SESSION['ORG_ID']);

$sth = $dbh->query ("SELECT *, user.last_name, user.first_name FROM msgs
                     INNER JOIN users
                     ON msgs.user_id = users.id
                     WHERE user_id = '$user_id'
                     ORDER BY timestamp");               

$row = $sth->fetch ();

index.php HTML

<div id="msgs">
    <?php while ($row = $sth->fetch ()) { ?>
    <div class="msg_container">
        <div class="left"><? echo $row['last_name'].', '.$row['first_name']; ?><br />
            <? $timestamp = date('m/d/Y g:i a', strtotime($row['timestamp'])); echo $timestamp; ?>
        </div>
        <div class="right"><? echo $row['msg']; ?></div>
        <div class="clear"></div>
    </div>
    <? } ?>
    <div class="add_note">
        <div class="left">Add Message</div>
        <div class="right">
            <form id="add_msg">
                <textarea id="msg" name="msg"></textarea>
                <input type='submit' class="button right-aligned" value='Submit' />
            </form>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>
</div>

add.php

<?php

require_once('../../includes/connect.php');

$dbh = get_dbh($_SESSION['ORG_ID']);

$user_id = $_POST['user_id'];
$msg= $_POST['msg'];

date_default_timezone_set("UTC");
$timestamp = date('Y-m-d H:i:s', strftime(gmmktime())); 
date_default_timezone_set($_SESSION['TIME_ZONE']);

$sth = $dbh->prepare ("INSERT INTO msgs (id, user_id, msg, timestamp) VALUES (?, ?, ?, ?)");
$data = array (NULL, $user_id, $msg, $timestamp);

$sth->execute ($data);

session_write_close();

?>

Answer 1

Вы можете просто добавить новое сообщение после предыдущих. Примерно так:

 $.ajax({  
 type: "POST",  
 url: "add.php",  
 data: dataString,  
 success: function() {  
 alert ("Done!");
 $('#msgs').append('<div class="msg_container">' + 
 '<div class="left">' + lastNameVariable + ', ' + firstNameVariable + 
 '<br />' + timeStampVariable + 
 '</div><div class="right">' + msg + '</div>' +
 '<div class="clear"></div></div>');
 }  
 });  

Вам нужно будет поместить имя, фамилию, метку времени и т. Д. В переменные (или сделать это по-другому, например, сделать AJAX-вызов, чтобы получить информацию - что бы вы ни предпочли). Я не знал, что такое user_id, поэтому я подумал, что позволю вам заполнить эти переменные.

Это просто основная идея того, что вы могли бы сделать. Если у вас есть какие-либо вопросы, просто спросите.

Надеюсь, это поможет.

<ч />

Edit:

Если вы создали другую страницу с именем «getname.php» или что-то подобное (чтобы получить имя и фамилию), которая будет отображать «имя, фамилию» на основе идентификатора пользователя, переданного в URL, это может сработать , В URL он может иметь ?user_id=1234567, а затем на этой странице он будет выполнять запрос mysql_query и отображать имя и фамилию. Вот что я бы сделал:

getname.php ↓

<?
// ...
$user_id = $_GET['user_id'];
$result = mysql_query("SELECT * FROM table WHERE user_id = '$user_id' AND ...");
$row = mysql_fetch_array($result);
// ...
echo $row['last_name'] . ', ' . $row['first_name'];
// ...
?>

Конечно, вы бы поступили так же, как и свои запросы, но, надеюсь, это поможет вам понять, что я говорю. Затем, после того, как вы это сделаете, вы можете сделать:

 $.ajax({  
 type: "POST",  
 url: "add.php",  
 data: dataString,  
 success: function() {  
 alert ("Done!");
 var firstAndLast = '';
 var theTime = 
 $.get('getname.php?user_id='+user_id, function(data) {
 firstAndLast = data;
 });
 $('#msgs').append('<div class="msg_container">' + 
 '<div class="left">' + firstAndLast // this will display: "first name, last name" because of getname.php
 + '<br />' + theTime + 
 '</div><div class="right">' + msg + '</div>' +
 '<div class="clear"></div></div>');
 }  
 }); 

Что касается времени, вы можете либо отобразить его с помощью JavaScript (при обновлении будет отображаться время, записанное PHP), либо сделать то же самое, что и для имени.

Answer 2

Рассмотрим метод jQuery ajax load . Это версия более высокого уровня ajax. Вы отправите запрос, и ответ будет немедленно помещен в предыдущие элементы селектора.

$('#result').load('ajax/test.html', data);

Answer 3

В успешной части добавьте этот код:

success: function(data){
$('#flash').css("display","block");;
setTimeout(function () {
$('#flash').slideUp();`enter code here`}, 2000);
}

В HTML добавьте этот код:

<div id="flash" style="display:none;">Data Saved Successfully</div>

Answer 4

Вот лишь быстрая идея, чтобы вы начали. Вам необходимо вернуть данные из скрипта, который вы вызываете с помощью AJAX; данные, которые вы будете использовать для создания DIV, который вы хотите. Вам также нужно изменить вызов ajax на что-то вроде этого:

$.ajax({  
      type: "POST",  
      url: "add.php",  
      data: dataString,  
      success: function(data) {
       console.log(data); //to see what's returned
       //use the data to generate content you want  
       alert ("Done!")
      }  
    });  

Из-за структуры ваших данных, возможно, было бы лучше отправить ответ JSON.