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

Question

我正在编写一个页面更新，它与 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/

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

我可能错过了 MIT javascript http://www.prototypejs.org/ 哈哈，但我不认为它是。

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

研究 我找到了这个Update div with the result of an Ajax-call，但它并没有真正解释，因为 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。正是这个 refresh 我没有兴趣在 JS 的其他地方重新复制 PHP 代码，因为它已经在我的 PHP 中了。这更有意义吗？

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

进一步更新在 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

放弃这个请删除我的个人信息和 POSTSript-fetch-async-await/