在JavaScript中嵌入PHP

时间:2013-09-04 22:38:06

标签: php javascript dom

我正在尝试创建一个在您单击“新消息”按钮时打开的消息传递系统。我正在使用HTML,PHP和JavaScript。

我设置了一个带有容器的按钮,可以将textarea附加到其中。我用javascript DOM做这个。这部分我没有问题,它试图在PHP中使用PHP。

所以我想说我有一个变量:

<?php $my_name = "Eric" ?>

我可以在javascript中调用它吗?如果没有,有没有其他方法可以解决这个问题?

这是我的完整代码:

HTML:

<html>
<head>
    <link type="text/css" rel="stylesheet" href="message.css"/>
    <script type="text/javascript" src="js/message.js"></script>
</head>

<body>
    <div id="container"></div>

    <button id="new_message" onclick="createMessage()">New Message</button> 
</body>
</html>

CSS:

#container {
    position: absolute;
    height: 443px;
    width: 743px;
    border: 1px solid black;
    border-radius: 0 0 20px 0;
    margin-top: 100px;
}

使用Javascript:

function createMessage() {
    var form = document.createElement("form");
    form.name = "form_input";
    form.method = "POST";
    form.action = "messages.php";
    container.appendChild(form);

    var textarea = document.createElement("textarea");
    textarea.name = "message_input";
    textarea.cols = 84; 
    textarea.rows = 16; 
    textarea.id = "message_input"; 
    container.appendChild(textarea);
};

我正在尝试做类似Facebook的事情,当你点击消息按钮时,会出现一个弹出框,里面有php。

这可以按照我使用javascript的方式完成,还是必须使用别的东西?

感谢您的帮助!

4 个答案:

答案 0 :(得分:1)

考虑这一点的最佳方法是回到页面中使用的不同脚本语言的执行顺序。执行顺序是这样的:

(1)PHP在您的服务器上运行。它吐出一堆HTML和/或Javascript和/或CSS,作为对用户浏览器的响应发送。

(2)用户的浏览器收到响应,呈现HTML,然后执行Javascript。

实际上,这意味着您可以使 Javascript 依赖于 PHP ,但不是相反。

从您的问题来看,您可以随时执行PHP并在用户单击按钮时显示结果。所以让你的PHP吐出一些像这样的Javascript:

<script type="text/javascript">
    var myName = '<?php echo addslashes($my_name)?>';
</script>

[注意:您可能希望进行其他或不同的消毒。]

答案 1 :(得分:0)

通过按钮将变量传递给javascript是有意义的。例如

<button id="new_message" onclick="createMessage('<?php echo $my_name;?>')">New Message</button>

答案 2 :(得分:0)

我假设您真正的问题是“如何在PHP中获取数据并将该数据的副本提供给Javascript”。

您可以采取两种主要方法:

  1. 让您的Javascript在被触发时,尝试通过AJAX调用从服务器获取信息。这将是一个单独的PHP脚本,JS必须传递某种ID或其他信息,以帮助您弄清楚它需要什么。
    • 需要单独的PHP脚本和额外的管道。
    • 当数据量很大时更好
    • 当有很多这些按钮并且用户不会使用那些按钮时
    • 更好
    • 以后在
    • 上形成更多更美好的东西的基础
  2. 将信息嵌入到HTML中,并让Javascript读出来。
    • 更容易做到
    • 页面更大
    • 一旦你开始做很多事,可能会成为问题
    • 即使在使用AJAX之后,您可能需要稍微执行此操作,以传递ID和内容。
  3. 我建议你暂时尝试“快速而肮脏”的方式,只是为了感受它。例如,在您的PHP页面中:

    <?php
    /* ... */
    $defaultMessage = "Hello world! Watch me contain single quotes (') and double quotes(\") and other things!";
    /* ... */
    ?>
    <button id="new_message" onclick="createMessage(<?= htmlentities(json_encode($defaultMessage))?>">New Message</button>
    

    我不是100%肯定逃脱,而是在数据中使用单引号和双引号进行测试以确保没有任何错误,并记住您需要以一种方式逃避它以避免破坏HTML,并再次以另一种方式避免破坏javascript。然后在你的JS文件中:

    function createMessage(defaultMessage) {
        // ...
        textarea.value = defaultMessage;
        // ...
    }
    

    通过这种方式,您可以将PHP中的数据放入HTML输出中,然后(在PHP脚本停止运行之后),用户的浏览器会获取HTML,并且可以根据需要将数据拉出来。

答案 3 :(得分:0)

PHP在服务器端执行,而javascript运行客户端。 要在javascript和php之间传递变量或任何其他数据,您需要通过ajax requests或(对于静态数据)调用您的服务器将数据放入您的页面源以使用javascript处理它。无论如何,你需要convert the data on the server side来允许处理。 例如,创建一个包含以下内容的interface.php文件:

<?php
  $mydata = array("username"=>"john");
  echo "window.serverdata=".json_encode($mydata).";";
?>

然后将其添加到您的页面中:

<script type="text/javascript" src="interface.php"></script>
...
<script type="text/javascript">
  alert(serverdata.username);
</script>

请注意,ajax请求是事实上的标准,因为您不希望每隔几秒重新加载一次页面。如果要交换静态数据,上述方法非常有用。