页面上 AJAX 发布的脚本和 php 变量的顺序（加载顺序）答案

【问题标题】：Order of scripts and php variables for AJAX post on a page (loading order)页面上 AJAX 发布的脚本和 php 变量的顺序（加载顺序）
【发布时间】：2022-01-29 07:22:21
【问题描述】：

我有一个关于放置脚本和变量的顺序的问题。原因是我认为如果你有一个函数并且在页面加载后调用它，它将被“找到”并执行。

我有一个简单的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>
    <p>
    <div><button type="button" onclick="firstPage()">Test ajax call</button> </div>
    </p>
<div id="ajaxCall">
</div>

</body>


</html>

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

我的问题是，如果我把 php 变量设置得更深，比如在页面的正文中，那么脚本就不起作用了。

如果我把脚本放在页面底部，它就可以工作。所以就像 php include 一样，它基本上是按照它在代码中出现的顺序读取的，可以理解，但函数或脚本的重点肯定是声明它当按下按钮时它会被调用。

有没有办法将脚本、函数保留在标题部分中，并使用加载的变量调用它们，这些变量仅在加载脚本后加载。

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

【问题讨论】：

标签： php ajax variables post

【解决方案1】：

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

【讨论】：

迈克，非常感谢，它解释并回答了我的问题。我会试试这个。我实际上正在构建一个由用户前端组成的三部分分页系统，例如单击“客户”，然后您会转到客户列表。这是包括表头在内的所有内容。第二部分是一个 php 包含，它调用第三部分中的一个函数并向其发送查询、用户对系统应显示每页多少行的偏好以及 startRow2get 第三部分是一个接收上述输入的 php 函数，并返回数据和页面
一切正常，我现在已经尝试在上面实现这个（没有随机数），这就是你所说的。我什至通过在 js 函数中添加一个 php rand() 来测试您的示例。这仅按描述工作一次。了解这一切在哪里/如何被调用和实现的好例子
很高兴它对您有所帮助。保持良好的工作！顺便说一句，你应该使用 jQuery ajax - 更好。 api.jquery.com/jquery.ajax