了解Ajax在SQL查询响应更改时更新页面内容的请求

Question

我正在编写一个页面更新，它可以与PHP一起读取SQL数据库页面echo的div节"track_data"中的内容。但是它没有做这个更新idk

我有一个JavaScript脚本，我真的不完全理解，希望有人能解释它的主要原因——我认为检查-响应部分失败了？：

在我的PHP页面中：

<script type="text/javascript">
function InitReload() {
new Ajax.PeriodicalUpdater('track_data', 'fetch_sql.php', {
method: 'get', frequency: 60, decay: 1});
}
</script>

谢谢你的关注，希望今天有人能在我脸上第二次露出笑容：)

修复步骤感谢您对语法错误的建议。我还没有真正做到这一点，这里是你建议的更改，我已经更改了，但我仍然认为最后一个函数有问题，因为它没有更新div部分。

JS文件中的代码

// Start Clock refresh
// uses new new Ajax.PeriodicalUpdater( 
// in main fetch file to trigger the auto update of the page.
// Written by Denise Rose
var gUpdateDiv;
var gContentURL;
var gcheckInterval;
var gcheckURL = "";
var gCurrentCheck  ="";
_fetchUpdater('track_data','/fetch_sql.php','/fetch_sql.php',8000);

function _fetchUpdater(updateDiv,contentURL,checkURL,checkInterval)
{
gUpdateDiv = updateDiv;
gContentURL = contentURL;
gcheckInterval = checkInterval;
gcheckURL = checkURL;

setTimeout('check();',gCheckInterval);
}
//Called by _fetchUpdater every (n) seconds  determins if content should be updated.
function check()
{
new Ajax.Request(gContentUrl,{method:'get', onSuccess:'checkResponse'});
setTimeout('check();',gCheckInterval);
}
// looks for the response and determines if the div should be updated. 
function checkResponse(transport)
{
var content = transport.response.Text;
if(gCurrentCheck != content) {
gCurrentCheck = content;
new Ajax.Request(gContentUrl, {method: 'get',onSuccess:function t() { 
$(gUpdateDiv).innerHTML = t.responseText; /*t.response.json()*/}

}); 
}
}

这是我不理解的部分

function checkResponse(transport)
{
var content = transport.response.Text;
if(gCurrentCheck != content) {
gCurrentCheck = content;
new Ajax.Request(gContentUrl, {method: 'get',onSuccess:function t() { 
$(gUpdateDiv).innerHTML = t.response.json();/*t.responseText;*/}

}); 
}
}

方法和问题这里的传输是什么，t是什么？如果它将第二个正文的内容存储在gCurrentCheck中，并与传输版本的内容进行比较，那么如果它不同，为什么不更新呢？

我确实找到了这个https://api.jquery.com/jquery.ajaxtransport/

第一个答案不使用Ajax我得到了一个整洁的JS版本作为答案，这不是我真正想要的。我很有希望和阿贾克斯一起工作，但我很感激你的努力。我只是真的想向div区域发送一个刷新，以便PHP从SQL重建页面。

我可能错过了麻省理工学院的javascripthttp://www.prototypejs.org/哈哈，但我不认为是这样。

只是为了提供帮助：AJAX代表异步JavaScript和XML。简而言之，就是使用XMLHttpRequest对象与服务器进行通信。它可以发送和接收各种格式的信息，包括JSON、XML、HTML和文本文件。。。在不重新加载页面的情况下向服务器发出请求。

研究我发现这个Updatediv是Ajax调用的结果，但它并没有真正解释，因为OP使用的是像我一样的PHP，而不是HTML。答案是：

$.ajax({
url: 'http://dowmian.com/xs1/getcam.php',
type: 'GET',
data: {id: <?php echo $cam_id; ?>},
success: function(responseText){
$('#update-div').html(responseText);
},
error: function(responseText){
}
});

我不认为上面它回答了海报的问题或我的问题，因为ajax是一个基于服务器的推送，这有什么关系？就好像它的PHP驱动的需要在服务器上刷新内容，而不是提供新的html。正是这次刷新我不想在JS中的其他地方重新复制PHP代码，因为它已经在我的PHP中了。这样更有意义吗？

更新我确实发现编辑器缺少一个括号和一组单引号。我已经在上面更新了，但没有重大变化。为尼古拉斯干杯。我仍然希望有人了解Ajax，因为它位于这些技术的底层。我有一个服务器端的PHP文件，我希望使用AJAX从它指向gUpdateDiv的部分中提取PHP。因为它是从服务器派生的，并且是从SQL动态创建的。我看不出你的回答会如何帮助将这些数据从服务器推回到。$[(gUpdateDiv).inerHTML本应作用于整个页面，而不是整个页面。我不确定的是，这个触发器如何更新计时器，只更新这个$(gUpdateDiv).inerHTML。我也不知道基于服务器的刷新是否能做到这一点，或者文件中提供的传输id是否能够实现这一点。我想我错过了一些我还没有掌握的重要部分。之所以有两个定时器，是因为它有效地在不同的时间点检查同一个文件，因为它是由PHP创建的。如果是，它可能与第一个不同，即SQL数据已经更改，我希望它用它将其与第二个请求中的第二个"Get"进行比较的数据来更新这个$(gUpdateDiv).inerHTML。这听起来很简单，但在比较两个版本和确保使用第二个版本时遇到了困难。

进一步更新在Javascript文件中放置警报不会像这里那样弹出https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_alert然而，启动PHP中的相同警报工作正常，并创建了警报。从主PHP调用了相同的函数，并发生了警报，因此JavaScript正在运行下一次访问页面上的F12，查看是否有任何警告或错误。好的，在添加JQuery后，我以为我已经添加了它，但它并没有达到我预期的效果。由于包含了PHP创建的文本和图形，我希望这一切都能更新。图形不是文本，有什么想法吗。

除了图像问题，我还加了一行来更新图像，但我在PHP中也使用了这一行

<script type="text/javascript">
//initpage() ;
function updateArtworkDisplay() {
document.querySelector('#np_track_artwork').src = 'images/nowplaying_artwork_2.png?' + new Date().getTime();
}
</Script>

但是更新php中的图像不起作用

<div id='outer_img'><img id='#np_track_artwork' src='/images/nowplaying_artwork_2.png' alt='Playing track artwork' width='200' height='200'></div>

js中的更改

/ looks for the response and determines if the div should be updated. 
function checkResponse(transport)
{
var content = transport.response.Text;
if(gCurrentCheck != content) {
gCurrentCheck = content;
new Ajax.Request(gContentUrl, {method: 'get',onSuccess:function t() { 
$(gUpdateDiv).innerHTML = t.responseText; /*t.response.json()*/}


}); 
updateArtworkDisplay(); // fire up the redraw in php file.
}
}

几乎到了除了没有发生的重绘之外，它几乎完成了它需要做的事情

// Start Clock refresh
// uses new new Ajax.PeriodicalUpdater( 
// in main fetch file to trigger the auto update of the page.
// Written by Denise Rose
var gUpdateDiv="";
var gContentURL="";
var gcheckInterval=0;
var gcheckURL = "";
var gCurrentCheck  ="";


_fetchUpdater('track_data','/fetch_sql.php','/fetch_sql.php',8000);

function _fetchUpdater(updateDiv,contentURL,checkURL,checkInterval)
{
gUpdateDiv = updateDiv;
gContentURL = contentURL;
gcheckInterval = checkInterval;
gCheckURL = checkURL;

setTimeout('check();',gcheckInterval);
}
//Called by _fetchUpdater every (n) seconds  determins if content should be updated.
function check()
{
new Ajax.Request(gCheckURL,{method:'get',  onSuccess:'CheckResponse()'});
setTimeout('check();',gcheckInterval);
}
// looks for the response and determines if the div should be updated. 
function checkResponse(transport)
{
var content = transport.response.Text;
if(gCurrentCheck != content) {

gCurrentCheck = content;

new Ajax.Request(gContentUrl, {method: 'get',onSuccess:function t() { 
$(gUpdateDiv).innerHTML = t.responseText; /*t.response.json()*/}


});

$time = new Date().getTime();
new Ajax.Request('outer_img', {method: 'get',onSuccess:function s() { 
$('outer_img').innerHTML = "<img id='#np_track_artwork' src='/images/nowplaying_artwork_2.png?t='"+$time+" alt='Playing track artwork' width='200' height='200'>"}

});

}
}

Answer 1

放弃这个请删除我的个人信息并PostSrpt获取异步等待/