使用jquery自动刷新div的内容答案

【问题标题】：auto refreshing content of div with jquery使用jquery自动刷新div的内容
【发布时间】：2015-09-10 10:01:10
【问题描述】：

我有一个 div，它执行数据库查询并用内容填充 div。

我希望能够每 x 秒刷新一次 div，以便它显示任何新内容。

<div id="chatText" class="chatText">

<cfquery name="GetChatConversation" datasource="#request.FlintHost#" dbtype="ODBC">
    SELECT  *
    FROM        tbl_ChatConversation
    WHERE   int_ChatID = #url.int_ChatID#
</cfquery>

<cfoutput query="GetChatConversation">
    #str_Name# :#str_Content#<br />
</cfoutput>
</div>

我有以下代码刷新 div，但将整个页面插入到 div 中，而不是只刷新内容。

<script type="text/javascript">
setInterval("my_function();",5000); 
function my_function()
    {
  $('#chatText').load('');
}
</script>

任何想法如何让它工作？

谢谢

保罗

【问题讨论】：

socket.io 。看看

标签： jquery html json coldfusion cfquery

【解决方案1】：

我会将您希望出现在 div 中的代码放入一个单独的文件中（如何操作取决于您）。我在这个测试中使用了 PHP，它确实有效。

然后为您的页面和 javascript：

<div id="chatText" class="chatText"></div>

    <script type="text/javascript">
        setInterval("my_function();",5000); 
        function my_function() {
            $('#chatText').load('link to the external file');
        }
    </script>

我从一个单独的 .js 文件中调用了我的代码，如下所示：

$(function(){

    setInterval("LoadDB();",3000); 

});

function LoadDB(){
    $('#chatText').load('db_load.php');
}

这刚刚刷新了我的 DIV。另一种方法是您可以使用一些 ajax 方法，但上述方法应该可以工作。

【讨论】：

第一句中提到的代码必须包含查询。

【解决方案2】：

您必须有 2 个单独的文件。包含聊天的文件和生成聊天内容的文件。然后，您可以通过首次加载聊天或使用 setTimeout 函数以递归方式重新加载数据来加载内容，以保持每 5000 毫秒刷新一次文件。

这是一种快速而肮脏的方式。我建议使用 JSON 获取您的数据，并使用更好的方式来显示您的数据，例如使用数据表。

文件1.cfm

<div id="chat">
</div>
<script>
    var loadChat = function(){
        $("#chat").load(file2.cfm);
    }
    var refreshChat = function(){
        setTimeout(function(){
            loadChat();
            refreshChat();
        ,5000);
    }
    $(document).on('ready',function(){
        loadChat();
        refreshChat();
    });
</script>

文件 2 有你的内容

file2.cfm

<cfquery name="GetChatConversation" datasource="#request.FlintHost#" dbtype="ODBC">
    SELECT  *
    FROM        tbl_ChatConversation
    WHERE   int_ChatID = #url.int_ChatID#
</cfquery>

<cfoutput query="GetChatConversation">
     #str_Name# :#str_Content#<br />
</cfoutput>

【讨论】：

setInterval 消除了对递归 setTimeout 调用的需要。