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

此代码只是简单地预设了默认值并获取输入数据。然后将数据发送到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（），

Wordpress：通过AJAX发送电子邮件，出现404错误

1 个答案: