在 HTML 中运行 JavaScript 和 PHP - run javascript and php in html onclick

我在HTML中有一个下拉列表，元素名称为staff1，其中包含从数据库中获取的名称。我需要列表旁边的"发送电子邮件"按钮，单击该按钮后，必须在提交页面或表单之前向列表中的选定选项发送电子邮件。

现在，我知道HTML和JavaScript在客户端，PHP在服务器端。使用我的js，我可以在下拉列表中实时获取所选值。我想出了下面，以便能够通过javascript获取选定的值并将其传递给PHP用于电子邮件功能。所有这些都在同一个文件中。

<script>
    function sendEmail()
    {
        var val = document.getElementByName("staff1").value;
    }
</script>
<?php
    $to = "<script>document.writeln(val);</script>";
    $subject = "This is a test email";
    $txt = "test body"; 
    $headers = "From: aa@123.com";
    mail($to,$subject,$txt,$headers);
?>

我需要在我的 html 的 onclick 事件中调用所有这些 href 按钮。这是我的网页：

<a href="#" onclick="sendEmail()" class="button">Send Email</a>

我

不太确定如何将这三个集成在一起，我仍然会像其他一些帖子所建议的那样通过 AJAX 学习。目前，我希望一个快速的解决方案或解决方法可以做到。我到了下面，但它没有发送任何内容，即使我临时使用静态值定义 $to 参数。谢谢！

<?php
    echo '<a href="#" onclick="sendEmail()" class="button">Send Email</a><br/><br/>';
    echo '<script> function sendEmail() { var val = document.getElementByName("staff1").value; } </script>';
    $to = "<script>document.writeln(val);</script>";
    $subject = "This is a test email";
    $txt = "test body"; 
    $headers = "From: aa@123.com";
    mail($to,$subject,$txt,$headers);
?>

我试图给出快速的解决方案。试试吧.

<script>
function sendEmail(){
var to = document.getElementByName("staff1").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
  // // 
}
};
xhttp.open("GET", "send_mail.php?to="+to, true);
xhttp.send();
}
</script>

send_mail.php

<?php
$to = $_GET["to"];
$subject = "This is a test email";
$txt = "test body"; 
$headers = "From: aa@123.com";
mail($to,$subject,$txt,$headers);
?>

但它没有发送任何东西

这是因为这不是电子邮件地址：

"<script>document.writeln(val);</script>"

因此，邮件服务器可能会返回一个错误，告诉您用HTML包装的JavaScript代码块与电子邮件地址无关。

<小时 />

您有两种选择。将表单值发布到页面或使用 AJAX 向服务器发出请求。对于单个堆栈溢出问题/答案来说，这两个问题都非常广泛。但是，让我们看看我是否可以至少在高层次上描述这些过程来帮助您......

发布表单：在这种方法中，您的客户端 HTML 可能如下所示：

<form method="POST" action="somePage.php">
    <input type="text" name="email" />
    <input type="submit" value="Send Email" />
</form>

单击该提交按钮会将该电子邮件值发布到 somePage.php ，这将具有使用该值的代码。您仍然可以使用多种选项来自定义此设置。例如，您可能有一个hidden输入而不是text输入，您可以从 JavaScript 动态填充该hidden输入。

但最终你会得到的是一个发布到页面的表单。该页面将执行所需的服务器端操作，并直接为用户使用新 UI 进行响应，或者将用户重定向到另一个页面。您可以想象，这涉及重新加载整个页面。

AJAX：但是，如果您不想重新加载整个页面怎么办？如果您希望用户留在这里而不必在网站上导航怎么办？没关系，你可以使用 AJAX。 AJAX基本上是使用JavaScript在后台向页面发出请求。它比表单帖子复杂一些，但从服务器端代码的角度来看，功能是相同的。

网上有很多例子，这个似乎是一个合理的起点。从本质上讲，您将使用JavaScript将点击处理程序附加到按钮或链接（或任何元素，实际上），并且JavaScript将向执行该操作的PHP页面发出AJAX HTTP请求。该请求可以包括从客户端输入收集的信息。被请求的PHP页面将执行操作并做出响应，理想情况下可能是JSON数据而不是HTML。然后，客户端代码将对该响应做出反应，可能会向用户显示成功或失败消息。