将php post数据传递给javascript的方法答案

【问题标题】：Ways to pass php post data to javascript将php post数据传递给javascript的方法
【发布时间】：2012-08-04 00:21:26
【问题描述】：

所以我想知道，如果我有一个简单的 php 表单将信息发布到某个变量，我如何将发布的变量传递给 javascript 并能够操作数据？我想出的唯一方法是使用内联 javascript 和 php，但我觉得必须有一种更干净、更优雅的方式来做到这一点，其中变量不会在源代码中如此明显地出现并且是在外部处理的。这就是我现在正在玩的东西：

<form action="index2.php" method="post">
    <input name="sugar" class="form" type="text" value="" />
    <input name="fat" class="form" type="text" value="" />
    <input name="protein" class="form" type="text" value="" />
    <input type="submit" value="submit" />
</form>

接下来是：

<?php 
$sugar = $_POST['sugar'];
$fat = $_POST['fat'];
$protein = $_POST['protein'];
?>

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var sugar = "<?php echo $sugar ?>";
        var fat = "<?php echo $fat ?>";
        var protein = "<?php echo $protein ?>";
    </script>
    <script src="test.js" type="text/javascript"></script>
</head>

有人对我可以遵循的替代方案有什么建议吗？我已经很久没有使用javascript了，所以在处理这样的情况时知道我的选择会很高兴。

【问题讨论】：

“外部处理”是什么意思？您想为每个请求创建一个额外的脚本文件吗？内联脚本非常适合该任务。
我会的。这只是我正在运行的测试。
您能解释一下为什么您需要将$POST 值直接发送到JavaScript 吗？
对于我正在进行的这个实验，当我在糖、脂肪和蛋白质框中输入一个数字时，它们会生成一个图形仪表，显示这些值与每日推荐摄入量的对应关系。最终，如果我继续努力，它会将发布数据发送到数据库，然后从数据库数组中检索到的数据生成摄入量表（我认为这也需要类似的解决方案）。

标签： php javascript html

【解决方案1】：

最简单的方法是发送一个包含您发送的所有数据的 Javascript 对象。这可以通过 JSON 编码 $_POST 轻松完成：

var data = <?php echo json_encode($_POST) ?>;

然后，如果您在 POST 请求中发送了 fat 值，则可以访问 data.fat。

【讨论】：

哇！这看起来很有希望。有没有很好的资料来阅读 JSON 编码？
@tomc 以the manual 开头。请注意，在这种情况下，您创建的是 Javascript 而不是 JSON；但是，语法是相同的，所以 json_encode 可以完成您需要的工作。
@tomc，这与您已经在做的事情相同，只是它们正在对发布数据进行编码，而不是将原始数据回显到变量中。
我明白了......那么当 php 被渲染时它会是什么样子呢？编辑：刚刚测试过。它至少比我的解决方案更简洁。
@tomc 它避免了最终用任意变量污染你的全局命名空间。是的，这适用于任何数组。

【解决方案2】：

如果不使用 _GET 并将变量存储在 URL 中，您目前就拥有满足您需求的最佳解决方案。

【讨论】：

我想我的问题是假设传递了很多变量，而不仅仅是三个.. 我不认为在 url 中传递了很多不同的值会看起来很干净

【解决方案3】：

如果您想将这些变量添加到您的 JavaScript 中，则必须将它们打印出来并在某处可见。

对它们进行 JSON 编码并打印它们以便将它们保存在本地 JavaScript 变量中是我一直在使用的：

<?php
    function passToJavascript($variableName, $variable){
        if($variable = json_encode($variable))
            echo '<script>var '. $variableName .' = '. $variable .';</script>';
    }

    $foo = array(
        'bar1' => 1,
        'bar2' => 2,
        'bar3' => 3
    );

    passToJavascript('foo', $foo);
?>

将打印在您的 HTML 中：

<script>var foo = {"bar1":1,"bar2":2,"bar3":3};</script>

这样你就可以传递你想要的任何变量，可以是字符串、数字、数组甚至是“关联数组”。

【讨论】：

【解决方案4】：

我觉得将 php 变量传递给 javascript 变量的最佳方法是先对它们进行 json_encode。如果你将一个 php 数组传递给 javascript，你不能简单地说

var1 = <?php echo $var1; ?>

你应该像下面那样做。

<?php
    $arr = array('a' => 1, 'b' => 2, 'c' => 3, 'd' => 4, 'e' => 5);
?>

<script type="text/javascript">
    var arr = "<?php echo json_encode($arr) ?>";
</script>

【讨论】：

这基本上是@tom 已经在做的事情；这不完全是一种选择。

【解决方案5】：

您可以在输入中编写变量，然后使用 javascript 访问这些输入

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            //You already linked jquery so I use it, you could do without if necessary.
            $(document).ready(function(){
                var sugar = $('#sugar').val();
                var fat = $('#fat').val();
                var protein = $('#protein').val()
            });
        </script>
            var sugar = "<?php echo $sugar ?>";
            var fat = "<?php echo $fat ?>";
            var protein = "<?php echo $protein ?>";
        </script>
        <script src="test.js" type="text/javascript"></script>
    </head>
    <body>
        <input type="hidden" id="sugar" value="<?php echo $sugar ?>" />
        <input type="hidden" id="fat" value="<?php echo $fat?>" />
        <input type="hidden" id="protein" value="<?php echo $protein?>" />
    </body>
</html>

这样您的 javascript 就可以全部驻留在静态文件中。

【讨论】：

当您的标记或 php 文件中无法包含脚本时，这非常有用。

【解决方案6】：

您可以尝试使用 GET 而不是 POST 发送变量，然后您可以像这样直接从 javascript 访问它们：http://javascript.about.com/library/blqs1.htm

据我所知，无法从 javascript 访问 POST 变量。您将不得不使用您正在做的事情

【讨论】：