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

问：

我正在编写一个页面更新，它与PHP一起使用以读取SQL数据库，该页面回显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 中并与传输版本内容进行比较，那么如果它不同，为什么它不更新，如果 SQL 创建了不同的页面，它就是这样？

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

First Answer 不使用 Ajax我得到了一个简洁的JS版本作为答案，这并不是我真正想要的。我希望能与阿贾克斯合作，但我非常感谢你的努力。我只是想向 div 区域发送刷新，以便 PHP 从 SQL 重建页面。

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

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

研究我找到了这个带有 Ajax 调用结果的更新 div，但它并没有真正解释，因为 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）.innerHTML 应该被执行，而不是整个页面。我不确定的是，这个触发器如何更新计时器，只是这个$（gUpdateDiv）.innerHTML 。我也不知道基于服务器的刷新是否会执行此操作，或者从文件提供的传输 ID 是否能够提供该 .我想我错过了一些我还没有或还没有掌握的重要部分。有两个计时器的原因是它有效地在PHP创建的不同时间点检查同一个文件，如果它是，它可能与第一个不同，即SQL数据已更改，我希望它更新这个$（gUpdateDiv）.innerHTML与第二个请求中的第二个“Get”的数据进行比较。这听起来很简单，在实践中很简单，但卡住了比较两个版本并确保使用第二个版本。

进一步的更新，在 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'>"}
          
      });
           
    }
}