如何使用AJAX刷新表

How can I use AJAX to refresh a table

本文关键字：刷新 AJAX 何使用      更新时间：2023-09-26

我正试图从数据库中获取一个要更新的表。我一直在尝试遵循php指南，因为它认为它会很相似，但我可以让它发挥作用。

我有一个单独的文件，它获取数据并将其放入表中。然后我尝试使用Javascript来获取文件并刷新它

这是我的主文件。

<module template="../includes/header.cfm"  pagetitle = "Jaguar Live Capture">   
<div class="container-fluid">
  <div class="row-fluid">
    <div class="span12">
     <h1>Live Capture</h1><br />
     <h2>Pen 1</h2>
     <div id="tableHolder"></div>
    </div><!--/span-->
  </div><!--/row-->

这是我的getData.cfm

    <cfquery name="liveFeed">
SELECT * FROM details LIMIT 0, 10   
</cfquery>
    <style>
    .oddRow{background:#ffffff;}
    .evenRow {background: #DBDBDB;}
    .warn{background:red;}
    </style>
<table cellpadding="2">
<cfoutput query="liveFeed">
     <cfif liveFeed.currentRow mod 2><cfset rowstyle = "oddRow">
    <cfelse><cfset rowstyle = "evenRow">
    </cfif>
    <cfscript>
    if (liveFeed.form_id == "" || liveFeed.first_name =="" || liveFeed.surname =="" || liveFeed.email ==""){ rowstyle = "warn";}
    </cfscript>
    <tr class="#variables.rowstyle#">
        <td onclick="window.open('update.cfm?form_id=#liveFeed.form_id#', 'Update Details', 'width=350, height=350'); return false;">#liveFeed.form_id#</td>
        <td onclick="window.open('update.cfm?form_id=#liveFeed.form_id#', 'Update Details', 'width=350, height=350'); return false;">#liveFeed.title#</td>
        <td onclick="window.open('update.cfm?form_id=#liveFeed.form_id#', 'Update Details', 'width=350, height=350'); return false;">#liveFeed.first_name#</td>
        <td onclick="window.open('update.cfm?form_id=#liveFeed.form_id#', 'Update Details', 'width=350, height=350'); return false;">#liveFeed.surname#</td>
        <td onclick="window.open('update.cfm?form_id=#liveFeed.form_id#', 'Update Details', 'width=350, height=350'); return false;">#liveFeed.email#</td>
    </tr>
</cfoutput>
</table>

我尝试过一些javascript和ajax，但都没有成功。有人能帮我创建刷新页面的脚本吗。

试试这个。。。

<script type="text/javascript">
    window.setInterval(function(){$('#tableHolder').load('/getData.cfm');}, 6000);
</script>

setInterval用于每隔60秒启动一次匿名函数。

匿名函数使用jQuery.load（）函数从服务器获取文件HTML，并用它替换所选元素HTML。

您可以使用cfdiv标记为您管理AJAX请求：

<cfdiv id="tableHolder" bind="url:getData.cfm" />

然后，您可以使用ColdFusion.navigation函数来重新加载或更改该分区的URL

ColdFusion.navigate('getData.cfm', 'tableHolder');

使用jQuery load（）可以非常简单地完成此操作。load（）将向页面发出异步请求，然后将响应加载到指定的元素中。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(function(){
    $('#tableHolder').load('getData.cfm');
});
</script>

正在尝试将以上内容复制到您的页面中。

相关文章：