在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。 然后，客戶端代碼將對該響應做出反應，可能向用戶顯示成功或失敗消息。