页面上 AJAX post 的脚本和 php 变量的顺序（加载顺序）

Question

我对放置脚本和变量的顺序有疑问。原因是我想如果你有一个函数，你在页面加载后调用它，它就会被“找到”并执行。

我有一个简单的POST例子，两个php页面，php变量设置在脚本之前：

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="/digiblox/css/style.php" rel="stylesheet">

<script src="/digiblox/functions/jquery-3.6.0.js"></script>

<script>
<?php $startRow2send = rand(); ?>
function firstPage() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("ajaxCall").innerHTML = this.responseText;
    }
  xhttp.open("POST", "postRec.php", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send("startRow2send=" +<?php echo $startRow2send; ?>);
}
</script>

</head>

而本页的body：

<body>
    <p>
    <div><button type="button" onclick="firstPage()">Test ajax call</button> </div>
    </p>
<div id="ajaxCall">
</div>

</body>


</html>

所以这行得通，它调用一个简单的页面并输出“POST 方法发送的值是：”和值。

我的问题是，如果我将 php 变量设置得更靠下，比如说在页面的 body 中，那么脚本将不起作用。

如果我将脚本放在页面底部，它 works.So 就像 php include 一样，它基本上按照它在代码中出现的顺序被阅读，这是可以理解的，但肯定是一个函数或脚本来声明它并在按下按钮时调用它。

有没有办法保留 header 部分中的脚本和函数，并使用仅在加载脚本后才加载的加载变量调用它们。

同时，按钮不应该每次都“刷新”Ajax 调用吗？

Answer 1

页面及其内容是从上到下呈现的。所以如果你调用变量 X，你必须先声明它，然后调用它 => 这应该回答关于顺序的问题。现在关于 Ajax 和 php。 php 代码只呈现一次，因为这是它应该如何工作的。 AJAX 的发明是为了让开发人员可以 call/access 服务器端变量，而无需重新加载整个页面（您正在此处执行）。问题是你混合了 AJAX 和 PHP：你的 php 变量 $startRow2send 将只有一个值。我想您也会希望这个 PHP 变量值随着 AJAX 调用而改变。为此，您应该了解 AJAX 调用仅调用 JAVASCRIPT 函数。 第一页()。 PHP 变量保持不变，直到您重新加载页面。 PHP/HTML 仅呈现页面一次，仅此而已。 AJAX/JS 可以执行更多操作，因为它们运行来自浏览器（本地）。因此，也许您应该将 php 变量更改为 javascript 变量，并将其放入函数中。然后每次调用你的变量也会改变。

// you can use this function to generate a random number in Javascript
function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}

// then in your original function you can add

function firstPage() {
  // generate a random between 100 and 999
  var myJSRandomNr = getRandomArbitrary(100, 999)

  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("ajaxCall").innerHTML = this.responseText;
    }
  xhttp.open("POST", "postRec.php", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send("startRow2send=" + myJSRandomNr );
}

页面上 AJAX post 的脚本和 php 变量的顺序（加载顺序）

Order of scripts and php variables for AJAX post on a page (loading order)

php

variables

ajax

post