Wordpress：通过 AJAX 发送电子邮件，收到 404 错误

Question

我正在构建一个自定义主题，并且在我的联系页面上，我想使用 AJAX 发送一封电子邮件。通过做一些研究，我找到了一种方法来实现这一点。

首先，在提交表单时，我使用常规 javascript 进行了一些验证：

const contactFormSubmit = () => {
    const submitButton = document.querySelector('#contact-submit');
    console.log(submitButton);
    document.addEventListener('click', e => {
      if (e.target == submitButton) {
        e.preventDefault();
        const name = document.getElementById('name').value;
        const email = document.getElementById('email').value;
        const message = document.getElementById('message').value;
        checkForm(name, email, message);
      }
    })
  }

这段代码只是简单地prevets default 并获取输入数据。然后我们将数据发送到 checkForm() 函数以检查是否有任何错误。

const checkForm = (name, email, message) => {
    if (name && message && email) {
      if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {

        jQuery.ajax({
           url: `<?php echo admin_url('admin-ajax.php'); ?>`,
           type: "POST",
           cache: false,
           data:{
              action: 'send_email',
              name: name,
              email: email,
              message: message,
                },
           success:function(res){
                   alert("Email Sent.");
                  }
        });

    printMessage('success', 'Thank you for you email. We will get back to you as soon as we can');
  } else {

    printMessage('error', 'email is not in the correct form')
  }
} else {
  printMessage('error', 'Make Sure all fields are filled out')
  }
 }

如果有错误，它将通过将消息发送到 printMessage 来出错。

const printMessage= (outcome, message) => {
    if (!messageOn) {
      resultMessageContainer = document.createElement('div');
      pageContent = document.querySelector('.contact-container');
      document.body.insertBefore(resultMessageContainer, pageContent);
    } else {
      resultMessageContainer.innerHTML = '';
    }

    if (outcome == 'success') {
      resultMessageContainer.innerHTML = `${outcome} ${message}`;
      console.log('SUCCESS');
      messageOn = true;
    } else if (outcome == 'error') {
      resultMessageContainer.innerHTML = `${outcome} ${message}`;
      console.log('failure');
      messageOn = true;
    }
  }

如果没有错误，我们应该向后端发出ajax请求。然而。在发送此 ajax 请求时，我收到以下错误：

jquery.min.js:4 POST http://elbe.local/contact-us/%3C?php%20echo%20admin_url(%27admin-ajax.php%27);%20?%3E 404 (Not Found)

从错误中，我可以看出问题出在 admin-ajax.php 文件上。我的 javascript 文件在一个单独的文件中，可能与它有关。

在我的functions.php 中，这是负责发送电子邮件的函数。

add_action( 'wp_ajax_send_email', 'callback_send_email' );
add_action( 'wp_ajax_nopriv_send_email', 'callback_send_email' );

function callback_send_email(){

      $name = $_REQUEST['name'];
      $email = $_REQUEST['email'];
$message= $_REQUEST['message'];
$subject = "Contact Form";
  $email_body = "The following prospectus has contacted you.<br>".
    "Name: $name. <br>".
    "Email: $email. <br>".
    "Message: $message. <br>";
      $to = "naderabouezze93@gmail.com";
      $headers  = "MIME-Version: 1.0" . "\r\n";
      $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
      $headers .= "From: $name <$email> \r\n";
      $headers .= "Reply-To: $email \r\n";
  $mail = mail($to,$subject,$email_body,$headers);
    if($mail){
          echo "Email Sent Successfully";
        }
die();

}

任何关于如何完成这项工作的指导将不胜感激。谢谢！

Answer 1

如 @ADyson 所述，如果在 .js 文件中，则不会执行 PHP 代码，因此您应该通过隐藏输入获取它，例如：

<input type="hidden" value="<?= admin_url('admin-ajax.php'); ?>" name=ajaxURL >

在 PHP 文件中包含以上代码，可能在 header.php 或 footer.php

然后你可以这样获取：

url: jQuery('input[name=ajaxURL]').val(),