logo标签列表

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

phpjavascripthtml
5

我在想，如果我有一个简单的php表单，将信息发布到特定变量，如何将该发布变量传递给javascript并能够操纵数据？ 我唯一想到的方法是使用php内联javascript，但我觉得必须有更清晰和更优雅的方法来处理外部变量，以避免变量在源代码中明显显示。 这是我现在正在尝试的内容：

<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的时间不长，因此在处理这种情况时知道我的选择会很好。

“外部处理”是什么意思？你是想为每个请求创建一个额外的脚本文件吗？内联脚本完全可以胜任这个任务。 - Bergi
我会的。这只是我正在运行的测试。 - tom c
你能解释一下为什么需要直接将 $POST 值传递到 JavaScript 吗？ - Bergi
对于我正在进行的这个实验，当我在糖、脂肪和蛋白质框中输入一个数字时，它们会生成一个图形仪表，显示这些值如何与每日推荐摄入量相对应。最终，如果我继续开发下去，它将把帖子数据发送到数据库，然后从检索到的数据库数组中生成摄入仪表（我认为这也需要类似的解决方案）。 - tom c
6个回答
9

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

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

如果您在POST请求中发送了fat值，那么您可以访问data.fat等内容。

哇！这看起来很有前途。有没有一个好的来源可以了解JSON编码？ - tom c
@tomc 从手册开始。请注意，在本例中，您正在创建的是Javascript而不是JSON；然而，语法是相同的，所以 json_encode 能胜任您需要的工作。 - lonesomeday
@tomc，这与您已经在做的相同，只是他们对帖子数据进行编码，而不仅仅是将原始数据回显到变量中。 - Cypher
我明白了...那么当PHP被渲染时它会是什么样子呢？编辑：我刚刚测试了一下。它至少比我的解决方案更加简洁。 - tom c
@tomc 这还可以避免使用任意变量污染全局命名空间。是的，这适用于任何数组。 - lonesomeday
2

如果您想将这些变量传递给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>

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

2

如果不使用_GET并将变量存储在URL中，您目前拥有最适合您要求的解决方案。

1
我猜我的问题是假设有很多变量被传递，而不仅仅是三个... 我认为如果在URL中传递了许多不同的值，它看起来不会那么干净。 - tom c
1
我觉得将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已经在做的事情；它并不完全是一个替代方案。 - Cypher
1

您可以将变量写入输入框中，然后使用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文件中使用脚本时，这非常有用。 - Cypher
0

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

据我所知，无法从javascript中访问POST变量。你必须像你正在做的那样使用其他方法。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接