从 PHP 回显中获取文本并使用 AJAX 更新 DIV答案

【问题标题】：Get text from PHP echo and update DIV using AJAX从 PHP 回显中获取文本并使用 AJAX 更新 DIV
【发布时间】：2017-10-12 13:56:19
【问题描述】：

我正在学习 HTML、PHP、AJAX 和 jQuery。在实践中，我需要每 3 秒刷新一次 DIV 容器，而无需重新加载整个页面。

我必须使用 AJAX 刷新，并且响应需要是使用 PHP 在服务器中生成的随机数。

我有这个：

index.php

<div id="contador">NEED TO OVERWRITE THIS TEXT</div>

number.php

<?php
    echo "Number: " . rand(1,100);
?>

ajaxreload.js

function update() {
  $("#contador").load('Loading...'); 
  $.ajax({
    type: 'GET',
    url: 'number.php',
    timeout: 3000,
    success: function(data) {
      $("#contador").html(data);
      $("#contador").html(''); 
      window.setTimeout(update, 3000);
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      $("#contador").html('Timeout...');
      window.setTimeout(update, 3000);
    }
});
}
$(document).ready(function() {
    update();
});

DIV 每 3 秒更新一次，但它没有从 number.php 获得回显响应。我收到一条非常快的“正在加载...”消息，然后是“超时...”。怎么了？我需要使用其他东西而不是回声？另一种类型或 URL 数据？另一个 AJAX 函数？

谢谢！

已解决：谢谢！在控制台中解决 :) 问题是我的 index.php 文件位于根目录中，而 number.php 和 ajaxreload.js 位于“脚本”文件夹中。参数 url: 'number.php' 尝试从 div 位置（index.php 所在的位置）加载它，而不是脚本文件调用的位置

谢谢@dan08 @Keith Chason 这是我第一次使用控制台

【问题讨论】：

你的控制台说什么？我的意思是你得到php响应了吗？另外，为什么要设置 div 然后将其重置为 null？
$("#contador").html(''); 设置后立即清空内容。此外，如果您进入错误处理程序，实际检查报告的错误是有意义的。
我从其他用户问题中复制了这一行。但删除这一行仍然得到“超时”@PatrickQ
如果我在浏览器中加载这个 PHP 文件，我就会得到答案。但我认为它没有在 AJAX 脚本@Akintunde 中得到响应
1.检查您的控制台（网络选项卡）以查看 ajax 请求的执行情况（它以某种方式失败）。 2.在错误函数中添加console.log(textStatus)，以获取更多错误信息。请将结果添加到您的问题中。

标签： javascript php ajax

【解决方案1】：

我现在没有测试这个的环境，但我怀疑window.setTimeout(update, 3000); 不是你想要做的。

$.ajax 函数的timeout 参数是请求允许的时间量，而不是它运行的时间间隔。

http://www.tutorialsteacher.com/jquery/jquery-ajax-method

如果你想让它每 3 秒加载一次，我会在 Javascript 中使用 setInterval 函数：

https://www.w3schools.com/jsref/met_win_setinterval.asp

function update() {
  $("#contador").load('Loading...'); 
  $.ajax({
    type: 'GET',
    url: 'number.php',
    success: function(data) {
      $("#contador").html(data);
      //$("#contador").html(''); This clears your <div>
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      $("#contador").html('Timeout...');
      console.log('TextStatus: '+textStatus);
      console.log('ErrorThrown: ' + errorThrown);
    }
});
}
$(document).ready(function() {
    setInterval(update, 3000);
});

【讨论】：

谢谢，但我仍然使用您的代码得到“超时...”
这可能与您正在检索的内容有关。我用调试值更新了我的答案，所以查看浏览器上的控制台，看看你是否得到任何东西。另外，请检查您的number.php 是否可以通过网络浏览器访问。
谢谢！在控制台中解决 :) 问题是我的 index.php 文件位于根目录中，而 number.php 和 ajaxreload.js 位于“脚本”文件夹中。参数 url: 'number.php' 尝试从 div 位置（index.php 所在的位置）加载它，而不是脚本文件调用的位置
它可以使用任何一种技术，不同之处在于 setInterval 在再次调用之前给出了一个固定的 3 秒更新运行时间，而 setTimeout 在 ajax 请求解决后等待 3 秒，然后再次调用它。