发送电子邮件，HTML > jQuery > PHP。

Question

我正在尝试将文本框中输入的文本发送到我的邮箱。

<form class="form align-center" id="mailchimp">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="newsletter-label font-alt">
                Stay informed with our newsletter
            </div>
            <div class="mb-20">
                <input placeholder="Enter Your Email" class="newsletter-field form-control input-md round mb-xs-10"
                    name="emaill" type="email" pattern=".{5,100}" required aria-required="true">
                <button type="submit" aria-controls="subscribe-result" id="submit_btnn"
                    class="btn btn-mod btn-medium btn-round mb-xs-10">
                    Subscribe
                </button>
            </div>
            <div class="form-tip">
                <i class="fa fa-info-circle"></i> Please trust us, we will never send you spam
            </div>
            <div id="subscribe-result" role="region" aria-live="polite" aria-atomic="true"></div>

然后我在JavaScript中捕获它

$(document).ready(function(){
    $("#submit_btnn").click(function(){
        //get input field values
        var user_email = $('input[name=emaill]').val();
        //simple validation at client's end
        var proceed = true;
        //we simply change border color to red if empty field using .css()
        if (user_email == "") {
            $('input[name=email]').css('border-color', '#e41919');
            proceed = false;
        }
        //everything looks good! proceed...
        if (proceed) {
            //data to be sent to server
            post_data = {
                'userEmail': user_email
            };
            console.log(post_data);
            //Ajax post data to server
            $.post('nieuwsbrief.php', post_data, function(response){
                //load json data from server and output message     
                if (response.type == 'error') {
                    output = '<div class="error">' + response.text + '</div>';
                }
                else {               
                    output = '<div class="success">' + response.text + '</div>';
                }      
                $("#subscribe-result").hide().html(output).slideDown();
            }, 'json');
            
        }
        
        return false;
    });
    
    //reset previously set border colors and hide all message on .keyup()
    $("#contact_form input, #contact_form textarea").keyup(function(){
        $("#contact_form input, #contact_form textarea").css('border-color', '');
        $("#subscribe-result").slideUp();
    });
    
});

接下来我想使用Ajax post将其发送到我的php文件

<?php
if($_POST)
{
    echo '<script>console.log($_POST["userEmail"])</script>';
    $to_Email       = "[e-mail]"; //Replace with recipient email address
    $subject        = 'Message from website '.$_SERVER['SERVER_NAME']; //Subject line for emails
    echo '<script>console.log(to_Email)</script>';
    
    //check if its an ajax request, exit if not
    if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
    
        //exit script outputting json data
        $output = json_encode(
        array(
            'type'=>'error', 
            'text' => 'Request must come from Ajax'
        ));
        
        die($output);
    } 
    
    //check $_POST vars are set, exit if any missing
    if(!isset($_POST["userEmail"]))
    {
        $output = json_encode(array('type'=>'error', 'text' => 'Input fields are empty!'));
        die($output);
    }

    //Sanitize input data using PHP filter_var().
    $user_Email       = filter_var($_POST["userEmail"], FILTER_SANITIZE_EMAIL);
    $user_Message     = "d";
    
    $user_Message = str_replace("\&#39;", "'", $user_Message);
    $user_Message = str_replace("&#39;", "'", $user_Message);
    
    //additional php validation
    if(strlen($user_Name)<4) // If length is less than 4 it will throw an HTTP error.
    {
        $output = json_encode(array('type'=>'error', 'text' => 'Name is too short or empty!'));
        die($output);
    }
    if(!filter_var($user_Email, FILTER_VALIDATE_EMAIL)) //email validation
    {
        $output = json_encode(array('type'=>'error', 'text' => 'Please enter a valid email!'));
        die($output);
    }
    if(strlen($user_Message)<5) //check emtpy message
    {
        $output = json_encode(array('type'=>'error', 'text' => 'Too short message! Please enter something.'));
        die($output);
    }
    
    //proceed with PHP email.
    $headers = 'From: '.$user_Email.'' . "\r\n" .
    'Reply-To: '.$user_Email.'' . "\r\n" .
    'X-Mailer: PHP/' . phpversion();
    
    $sentMail = @mail($to_Email, $subject, $user_Message . "\r\n\n"  .'-- '.$user_Name. "\r\n" .'-- '.$user_Email, $headers);
    
    if(!$sentMail)
    {
        $output = json_encode(array('type'=>'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.'));
        die($output);
    }else{
        $output = json_encode(array('type'=>'message', 'text' => 'Hi '.$user_Name .'! Thank you for your email'));
        die($output);
    }
}
?>

通过控制台日志，我发现在 PHP 文件开始之前一切都正常。但是在此之后...... 情况就不太妙了。感谢所有的提示和信息。

- Ethercloud

---

在PHP中，你不应该使用console.log来进行调试（这会破坏你的JSON响应），请将它们移除。 - Lawrence Cherone

当您使用PHP创建输出（echo，die等）时，它会发送回您的Ajax函数。由于这完成了回调函数，因此来自您的PHP脚本的任何其他输出都将被忽略。因此，在您的PHP脚本完成其工作之前，请不要发送输出。另外注意：不要在单引号内使用变量。PHP将它们视为纯文本。请使用双引号或字符串连接。 - icecub

Answer 1

你可以使用STMP.js，而不是使用jQuery和PHP。我不知道如何使用jQuery或PHP回答这个问题，但我知道如何使用SMTP发送电子邮件。下面是我在JSFiddle上制作的一个示例。但是，由于安全原因，这可能在JSFiddle上无法正常工作。

JSFiddle
https://jsfiddle.net/Yeet45687564/9prs4j2a/21/

// the javascript code below is also found on JSFiddle

let subject;
let body;

function setValues() {

  // sets the values of the subject and body
  subject = document.getElementById("emailSubject").value;
  body = document.getElementById("emailBody").value;
  
}

function send() {
  setValues();
  
  // sends the email
  Email.send({
    Host: "smtp.gmail.com",
    Username: "<sender's email address>",
    Password: "<your email password>",
    To: "<recipient's email address>",
    From: "<sender’s email address>",
    Subject: subject,
    Body: body,
  }).then(
  
    // displays a message if the email was sent
    message => alert("Your Email was sent.")
    
  );
  
}

如果你无法让它正常工作，Pepipost 上有一个 SMTP 教程。

https://pepipost.com/tutorials/how-to-send-emails-with-javascript/

但是，使用 SMTP 可能会带来巨大的安全问题。除非你可以阻止他人检查和查看页面源代码，否则任何在你的网站上使用检查元素的人都能够获取你的电子邮件密码。

- YeetYeet