如何修复将 PHP 变量的值传递给 javascript 变量的问题

Question

挑战是如何获取包含消息长度（存储在 MYSQL 数据库中）的特定 PHP 变量（$length）以传递给 javascript 变量（var = length），以便让 javascript 决定是否在 HTML 页面上显示某个选取框。我正在为一所小学准备一个网站。在特定页面上，他们希望有一个选框，向父母显示一些最新或紧急的信息。如果您查看页面www.transitum.org/try_1，您会看到这样一个选框示例。如果您查看页面www.transition.org/try_2，您会看到上一页的副本，不同之处在于选框仍然存在，但在此页面上没有显示任何消息。两个选取框都是用 iframe 生成的，它的缺点是当没有显示消息时，iframe 仍然会占据一些垂直高度。理想情况下，当没有提供任何消息（内容）时，我希望 iframe 根本不可见。显示给父级的消息是通过 PHP 脚本从 MYSQL 数据库中获取的。这个 PHP 脚本的一部分也是导出每条消息的长度（这是通过 $length = strlen($result[.....]); 完成的）并回显结果（如 echo json_encode($length) ;) 允许使用 JSON/AJAX 脚本进一步处理。javascript 本身通过 if else 语句检查消息是否存在（因此长度 > 0 并因此显示 iframe）或是否没有消息（因此长度 = 0 并因此不显示 iframe）正在完美运行。挑战是如何获取包含消息长度（存储在 MYSQL 数据库中）的特定 PHP 变量（$length）以传递给 javascript 变量（var = length），以便让 javascript 决定是否在 HTML 页面上显示某个选取框。在www.transition.org/try_3 上，我正在运行以下脚本。<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script><script type="text/javascript">$(document).ready(function(){       $.ajax({            type:'POST',            url:'https://www.transitum.org/linski_nach/check3.php',            dataType: "json",            data:{length:length},            success:function(data){                console.log(data);                if(data.status == 'ok'){                var length = JSON.parse(length);                } else {}            }        });    });document.write(length);</script>如果我查看控制台日志，则会显示数字“53”，这确实是Try 1页面上显示的消息长度的正确值。然而，上面的脚本总是给我“0”。因此我无法让 javascript“检测”是否有消息是/否，以及是否需要显示 iframe 是/否。2019-08-26：所有 3 个答案都让我很好地了解了将 php 变量的值传输到 javascript 变量的机制是如何工作的。@Halfer：我将在最后一步打开一个单独的主题来解决我的问题。在这个地方，我现在只会添加修改后的脚本和两个链接，表明 Polywhirl 先生提供的代码基本可以工作。他的以下代码（带有 if else javascript 添加）被输入到 HTML 页面中。目前通过链接Try_5显示消息的长度和消息本身。目前通过链接Try_6显示消息的长度和消息本身（只有没有消息的公告）。现在唯一的问题是 HTML 页面本身不再显示......我试图找出如何获取我的 HTML 页面，如通过Try 1所见。任何建议都非常感谢。

Answer 1

在异步 Ajax 调用完成之前，您正在将长度写入页面。

此外，您错误地使用了成功功能。

var length = 0; // Global value

$(document).ready(function() {

  $.ajax({

    type: 'POST',

    url: 'https://www.transitum.org/linski_nach/check3.php',

    dataType: "json",

    data: { length: length },

    success: function(data, textStatus, jqXHR) {

      console.log(data); // 53

      if (textStatus === 'success' && jqXHR.readyState === 4) {

        length = JSON.parse(data); // Set the global variable

      } else {

        // Do nothing...

      }

      

      document.write(length); // Write out global length value

    }

  });

});

Answer 2

您可以将变量直接输出到脚本中echo。

但是一定要检查PHP输出了什么样的值。

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

<script type="text/javascript">

// Variable for example

$length = 53;

$(document).ready(function(){

    $.ajax({

        type:'POST',

        url:'https://www.transitum.org/linski_nach/check3.php',

        dataType: "json",

        data:{

            length: <?php echo $length; ?> // Output variable in length property

        },

        success:function(data){

            console.log(data);

            if(data.status == 'ok'){

                var length = JSON.parse(length);

            } else {}

        }

    });

});

document.write(length);

</script>

或者，当您有多个变量要传递时，例如关联数组，请尝试先将其转换为 JSON，然后进行回显并将其解析回 JavaScript。

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

<script type="text/javascript">

// Array for example

$vars = array(

   'length'   => 53,

   'string'   => 'text',

   'bool'     => true

);

// Encode to JSON

$json = json_encode( $vars );

$(document).ready(function(){

    $.ajax({

        type:'POST',

        url:'https://www.transitum.org/linski_nach/check3.php',

        dataType: "json",

        data: JSON.parse(<?php echo $json; ?>), // { length: 53, string: 'text', bool: true }

        success:function(data){

            console.log(data);

            if(data.status == 'ok'){

                var length = JSON.parse(length);

            } else {}

        }

    });

});

document.write(length);

</script>

所以 PHP can 变量只能在内echo联脚本中输出。如果您有多个变量要在 JavaScript 中使用，您可以创建一个内联脚本，将所有变量输出到 JS 中并在其他脚本中使用它们。

Answer 3

如果 console.log 有正确的数字，试试这个

var length = data;

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

    $.ajax({

        type:'POST',

        url:'https://www.transitum.org/linski_nach/check3.php',

        dataType: "json",

        data:{length:length},

        success:function(data){

            console.log(data);

            var length = data;

        }

    });

});

document.write(length);

</script>