我有一个链接数据库,用户可以提交链接。每次用户提交新链接时,它都会被添加到数据库中。我有一个单独的页面列出了所有提交的链接。当这个单独的页面发现数据库有变化时,如何使用AJAX加载它们?
需要根据数据库内容更新的页面必须定期轮询数据库。JavaScript是客户端技术,不适用于直接与后端服务器进行交互。
JavaScript代码如下(使用jQuery):
$.post("/webroot/checkForChanges.php",
{ currentNumber: currNumString },
function(dat){
$(dat).find('link').each( function() {
$('#linksTable').append(""+$(this).text()+"");
});
});
这将使用名为currentNumber的变量向您编写的页面(checkForChanges.php)发出POST请求,该变量的值是表中当前链接数量的字符串表示形式(您可以按任何方式计算这些链接)。
//open a database connection
$DB = connect( name, user, password );
//receive value
$currNum = $_POST['currentNumber'];
//check to see if sequence number has incremented since last time:
$seqNum = query( "SELECT currval('links-count')" );
if ($seqNum == $currNum){
exit(0);
} //if they are the same, just exit the page without writing anything
//otherwise, carry on... get the result of your query (for new links)
//and loop through, echoing return data
$newEntries = query("SELECT url FROM links WHERE id > ".$currNum);
echo "<newlinks>";
while ( $result = fetch_result( $newEntries ) ) {
echo "<link><a>".$result."</a></link>";
}
echo "</newlinks>";
该页面返回的输出结果将是一个XML文档,其中每个链接都包含您要放入表格单元格中的HTML节点。
现在我们可以回到您客户端Java代码中的$.post请求中的回调函数:
function(dat){
$(dat).find('link').each( function() {
$('#linksTable').append(""+$(this).text()+"");
});
});
dat是返回的文本,将其包装为jQuery对象,然后查找名为'link'的标签集合。对于php页面返回的每个'link'标签,执行一个函数,该函数将在linksTable中附加包含链接标记内数据的新表行。
您可以在单独的页面上拥有一个活动的JavaScript,基本上轮询数据库以获取更改,或者在成功提交后使用回调函数执行此操作。我不确定正在发生什么,所以不知道该推荐什么。