Javascript 调用AJAX jQuery函数不做任何事情，并且在页面加载时意外调用函数_Javascript_Jquery_Html_Ajax

Javascript 调用AJAX jQuery函数不做任何事情，并且在页面加载时意外调用函数

javascript jquery html ajax

Javascript 调用AJAX jQuery函数不做任何事情，并且在页面加载时意外调用函数,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,我正在尝试将我的网站上访问sql数据库的php代码片段转换为ajax，这样我就不必刷新页面，而且在工作中遇到了一些问题我编写了一个ajax jquery函数（getLatestData（）），它将html元素的值设置为从php页面请求返回的值。此函数是独立的（即不是由元素上的操作触发的，它只是一个函数本身），工作完全正常，从数据库检索数据并正确地将其放入字段中但是，我无法手动调用该函数。这应该每分钟发生一次（使用javascript的setInterval（）并检查当前秒数是否为2），因此每

我正在尝试将我的网站上访问sql数据库的php代码片段转换为ajax，这样我就不必刷新页面，而且在工作中遇到了一些问题

我编写了一个ajax jquery函数（

getLatestData（）

），它将html元素的值设置为从php页面请求返回的值。此函数是独立的（即不是由元素上的操作触发的，它只是一个函数本身），工作完全正常，从数据库检索数据并正确地将其放入字段中

但是，我无法手动调用该函数。这应该每分钟发生一次（使用javascript的

setInterval（）

并检查当前秒数是否为2），因此每分钟都会加载新数据（代码中的第二个

setInterval（）

部分）。这也可以很好地工作，因为我已经尝试从中发出警报。但是，如果我将该语句与对ajax函数的调用交换，则什么也不会发生。为什么会这样？如何调用ajax jquery函数

此外，每当页面加载时，我的ajax函数都会不断被调用（这是我知道该函数工作的唯一原因），尽管除了我正在尝试工作的调用之外，根本没有其他调用（即使删除该调用，也会发生这种情况）。这是ajax本身的功能还是我的代码有问题？我怎样才能阻止这种事情发生

代码：


远程最新数据沃里克
$（文档）.ready（函数（）{
$（函数getLatestData（）{
警报（“成功1”）；
$.ajax({
键入：“获取”，
url:“检索/getlatestreport.php”，
数据类型：“json”，
成功：功能（响应）{
警报（响应[1]）；
document.getElementById（“fAmbientTemperature_干式温度计”）.innerHTML=响应[0]；
document.getElementById（“fAmbientTemperature_ExposedThermometer”）.innerHTML=响应[1]；
document.getElementById（“fSoilTemperature_10CentimetersDown”）.innerHTML=响应[2]；
}
});
});
});
函数onLoad（）{
updateCurrentSystemTime（）；
//更新数据刷新的秒数
setInterval（函数（）{
秒=60-新日期（）.getSeconds（）+3；
如果（秒>59）{
秒=秒-60；
}
document.getElementById(
“timeToUpdate”）.innerHTML=秒；
}, 100);
//在第三秒刷新页面
setInterval（函数（）{
当前=新日期（）；
如果（当前.getSeconds（）=“2”）{
//location.reload（）；
//警报（“t3”）；
getLatestData（）；
}
}, 1000);
}
...

您的第一段代码在页面加载时运行，并导致AJAX请求。您有

$（document）.ready（function（）{…}）

，意思是：等待HTML加载完毕，然后调用函数。然后是

$（函数getLatestData（）{…}）

，意思是：等待HTML加载完毕，然后调用

getLatestData

。因此，总的来说，这意味着等待它被加载，然后检查以确保它被加载，然后调用

getLatestData

。这就是它在页面加载时执行AJAX请求的原因

（不用说，您不必重复等待HTML部分。事实上，我认为内联脚本根本没有必要这样做-它只适用于脚本位于自己的文件中时，如

globalscripts.js

，在加载页面之前有可能加载并尝试运行脚本。）

至于为什么AJAX调用在您尝试触发它时没有发生，您还没有说明您在哪里/是否设置了处理程序。例如，您可以使用

重新加载和$（“#重新加载按钮”）。单击（onLoad）
如果您已经在执行类似的操作，或者添加了这两行代码，您应该会在控制台中看到一条错误消息，说明它无法调用getLatestData
，因为它未定义。如果您不知道我所说的变量的“范围”是什么意思，请查找它getLatestData
在$（文档）.ready
调用中的匿名函数范围内声明和定义。因此，它只能在该函数内部使用。我已经指出，您可以去掉document.ready
部分。如果这样做，那么将在全局范围中声明和定义getLatestData
，AJAX调用应该可以工作
总之，您应该将第一个内联脚本替换为函数getLatestData（）{…}
好的，这是有道理的，但是我不可能在没有处理程序或触发器的情况下单独定义ajax函数。这就是我试图对我的getLatestData（）定义所做的，因此我可以从代码中的某个点手动调用它，而不是在与页面元素交互时调用它。有什么方法可以做到这一点吗？我在回答中又加了一行。希望能把事情弄清楚。
<html>
  <head>
    <title>Remote Latest Data Warwick</title>
    <link rel="icon" type="image/jpeg" href="favicon.jpg">

    <link rel="stylesheet" type="text/css" href="styles/defaultstyles.css">
    <link rel="stylesheet" type="text/css" href="styles/globalstyles.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
    <script src="scripts/globalscripts.js"></script>

    <script type="text/javascript">
    $(document).ready(function() {

      $(function getLatestData() {
        alert("success1");

        $.ajax({
          type: "get",
          url: "retrieve/getlatestreport.php",
          dataType: "json",

          success: function(response) {
            alert(response[1]);

            document.getElementById("fAmbientTemperature_DryThermometer").innerHTML = response[0];
            document.getElementById("fAmbientTemperature_ExposedThermometer").innerHTML = response[1];
            document.getElementById("fSoilTemperature_10CentimetresDown").innerHTML = response[2];
          }
        });

      });
    });
    </script>

    <script type="text/javascript">
    function onLoad() {
      updateCurrentSystemTime();

      // Update number of seconds to data refresh
      setInterval(function() {
        seconds = 60 - new Date().getSeconds() + 3;

        if (seconds > 59) {
          seconds = seconds - 60;
        }

        document.getElementById(
          "timeToUpdate").innerHTML = seconds;
      }, 100);

      // Refresh page on third second of minute
      setInterval(function() {
        current = new Date();

        if (current.getSeconds() == "2") {
          //location.reload();
          //alert("t3");
          getLatestData();
        }
      }, 1000);
    }
    </script>
  </head>
...