在html onclick中运行javascript和php

Question

我在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按钮。 这是我的html：

<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);
?>  

Answer 1

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

<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);
?>

Answer 2

但它没有发送任何东西

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

"<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。 然后，客户端代码将对该响应做出反应，可能向用户显示成功或失败消息。