Question

所以我想知道，如果我有一个简单的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太长时间，所以在处理这样的情况时知道我的选项会很好。

Answer 1

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

轻松完成

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

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

Answer 2

不使用_GET并将变量存储在URL中，您可以获得当前最佳解决方案。

Answer 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>

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

Answer 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>

Answer 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就可以全部驻留在一个静态文件中。

Answer 6

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

据我所知，没有办法从javascript访问POST变量。你必须使用像你在做的事情

将php发布数据传递给javascript的方法

6 个答案: