javascript - 如何使用 AJAX 刷新表格

Question

我正在尝试从我的数据库中获取要更新的表。我一直在尝试遵循 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 但没有成功。谁能帮我创建脚本来刷新页面。

Answer 1

试试这个...

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

setInterval用于每 60 秒触发我们的匿名函数。

匿名函数使用jQuery .load()函数从服务器获取文件 HTML 并用它替换选定的元素 HTML。