自动刷新Div内容而不刷新页面(不使用外部脚本)

时间:2016-06-22 07:39:35

标签: javascript php jquery mysql ajax

我想更新div的内容。我正在创建一个聊天框,我不想在输入消息时刷新整个页面。我只是希望div能够刷新。 div具有嵌入代码,不使用外部脚本。 我的代码:

<div class="direct-chat-messages" id='chatlogs'>
             <?php  
                    include "connect.php";

                    $q121=mysql_query("Select DISTINCT full_date as full_date, date from chats where (employee_id='$employee_id' and chat_id='$chat_id') or (employee_id='$chat_id' and chat_id='$employee_id')") or die(mysql_error());
                    if(mysql_num_rows($q121) > 0)
                    {
                    while($r211=mysql_fetch_array($q121)){
                        $full_date1=$r211['full_date'];
                        $date1=$r211['date'];
                    ?>

                    <div class="chat-box-single-line">
                                <abbr class="timestamp"><?php echo $r211['full_date']; ?></abbr>
                    </div>
                    <?php
                    $q122=mysql_query("Select * from chats where date='$date1' and (chat_id='$employee_id' or employee_id='$employee_id') and (chat_id='$chat_id' or employee_id='$chat_id') ORDER BY time ASC") or die(mysql_error());
                    if(mysql_num_rows($q122) > 0)
                    {
                        while($r22=mysql_fetch_array($q122)){
                            $employee_id1=$r22['employee_id'];
                            $chat_id1=$r22['chat_id'];
                            if(($employee_id1 === $employee_id) || ($chat_id1 === $employee_id))
                            {
                    ?>
    <div>
                        <div class="direct-chat-info clearfix">
                        <span class="direct-chat-name pull-left"><?php echo $first; ?></span>
                        <span class="direct-chat-timestamp"><?php echo $r22['time']; ?></span>
                        </div>
                        <div class="direct-chat-text">
                        <?php echo $r22['msg'];?>
                        </div>
                        <div class="direct-chat-info clearfix">
                        </div>
                        <div class="direct-chat-info clearfix">
                        </div>
                    </div>
                   <?php
                            }
                            else 
                                if(($employee_id1 === $chat_id) || ($chat_id1 === $chat_id)){
    ?>
    <div>
                        <div class="direct-chat-info clearfix">
                        <span class="direct-chat-namei pull-left"><?php echo $we1['fname'];?></span>
                        </div>
                        <div class="direct-chat-text">
                        <?php echo $r22['msg'];?>
                        </div>
                        <div class="direct-chat-info clearfix">
                        <span class="direct-chat-timestamp pull-right"><?php echo $r22['time']; ?></span>
                        </div>
                        <div class="direct-chat-info clearfix">
                        </div>
                    </div>
        <?php                       
                            }
                        }
                    }
                    else
                    {
                    }
                    }
                    }
                    ?>
                  </div>

1 个答案:

答案 0 :(得分:0)

您可以使用React使用的虚拟DOM概念,而不是将内容注入div。要在不重新加载的情况下更新页面,可以使用Flux Architecture,因此如果数据库中有任何更改,它将触发所有视图以更改其状态。没有重新加载就可以在没有javascript的情况下实现更新页面。