wp_mail() + Ajax + ValidationEngine + $wpdb->插入

Question

我决定问这个问题，因为没有简单的答案。 我的 home.php 中有一个联系表格，如下所示：

HTML：

<form id="js-calculator" name="calculator" action="" method="post">
     <input type="email" name="email" id="email" placeholder="E-mail" />
     <input type="tel" name="phone" id="phone" placeholder="Phone" />
     <textarea name="message" id="message" placeholder="Message"></textarea>
     <label for="accept"><input class="" type="checkbox" id="accept" name="accept" /> I agree to terms and conditions</label>
     <button type="submit" id="send__btn">Wyślij wycenę</button></p>
</form>

JavaScript：

jQuery(document).ready(function ($) {
  $('#js-calculator').submit(function (e) {
    e.preventDefault();
    var $this = $(this);
    $.ajax({
      url: '<?php echo admin_url("admin-ajax.php") ?>',
      type: 'post',
      dataType: 'JSON',
      data: $this.serialize()
      }
    });
  });
});

functions.php 中的 PHP

  // Function to send emails
  function sendMail () {
    $subject = 'Automatic evaluation';
    $headers = 'From: My Website Contact Form <contact@mysite.com>';
    $send_to = "office@mysite.com, ". $_POST['email'];
    $subject = "Evaluation for ". $_POST['name'];
    $message = "Message from ".$_POST['message'];
  }
  add_action('wp_ajax_sendhtmlmail', 'sendMail');
  add_action('wp_ajax_nopriv_sendhtmlmail', 'sendMail');

  add_filter( 'wp_mail_content_type', 'set_content_type' );
  function set_content_type( $content_type ) {
    return 'text/html';
  }

  // Function to update DB
  function addCustomer(){
  global $wpdb;

  $phone = $_POST['phone'];
  $email = $_POST['email'];
  $accept = $_POST['accept'];

  if($wpdb->insert('customers',array(
    'phone'=>$phone,
    'email'=>$email,
    'accept'=>$accept
  ))===FALSE){
  echo "Error";
} else {
  $wpdb->insert_id;    
}
die();
}
add_action('wp_ajax_addCustomer', 'addCustomer');
add_action('wp_ajax_nopriv_addCustomer', 'addCustomer');

我想要实现的是： 1. 向客户和网站管理员发送 HTML 电子邮件， 2. 将客户详细信息添加到数据库，检查电子邮件是否存在， 3. 拥有安全的连接和数据流；

现在我不知道我做错了什么...任何帮助将不胜感激。

Answer 1

你快到了，有几件事：

在你的JS ajax调用中，你需要指定要调用的动作，这里是修改后的调用：

jQuery(document).ready(function ($) {
    $('#js-calculator').submit(function (e) {
      e.preventDefault();
      var $this = $(this);
      $.ajax({
        url: '<?php echo admin_url("admin-ajax.php?action=sendhtmlmail") ?>',
        type: 'post',
        dataType: 'JSON',
        data: $this.serialize()
        }
      });
    });
  });

现在，让我们看看 php 函数：

// Function to send emails
function sendMail () {
  $data = array(
    'email' = sanitize_email($_POST['email']),
    'name' = sanitize_text_field($_POST['name']),
    'message' = sanitize_text_field($_POST['message']),
  );
  $subject = 'Automatic evaluation;
  $headers = 'From: My Website Contact Form <contact@mysite.com>';
  $send_to = "office@mysite.com, ". $data['email'];
  $subject = "Evaluation for ". $data['name'];
  $message = "Message from ".$data['message'];
  wp_mail($send_to, $subject, $message, $headers);
  addCustomer($data);
  // TODO: Fill in this $response array with meaninfull data (check output from wp_mail and addCustomer)
  $response = array(
    'success' => true
  );
  wp_send_json($response);
}
add_action('wp_ajax_sendhtmlmail', 'sendMail');
add_action('wp_ajax_nopriv_sendhtmlmail', 'sendMail');

只是缺少 wp_mail 调用和输入的清理，我删除了您的其他 ajax 调用，并让 sendMail 函数将数据传递给 addCustomer 函数。您会注意到一个 wp_send_json 调用，这是将响应发送到 JS。 https://codex.wordpress.org/Function_Reference/wp_send_json

现在让我们看看你的 addCustomer 函数：

// Function to update DB
function addCustomer($data){
  global $wpdb;

  $phone = $data['phone'];
  $email = $data['email'];
  $accept = $data['accept'];

  if($wpdb->insert('customers',array(
      'phone'=>$phone,
      'email'=>$email,
      'accept'=>$accept
    ))===FALSE){
    return false;
  } else {
    return $wpdb->insert_id;
  }
}

这里唯一改变的是返回，以便调用者知道它是否失败。

要处理来自用户的输入，请从 wordpress 和核心功能中查看此文档： https://codex.wordpress.org/Validating_Sanitizing_and_Escaping_User_Data

---

或者您可以一起使用以下插件：

• https://wordpress.org/plugins/contact-form-7/
• https://wordpress.org/plugins/flamingo/

使用方法如下：https://contactform7.com/save-submitted-messages-with-flamingo/

希望对您有所帮助！ 问候，

PS wordpress 问题更适合这里：https://wordpress.stackexchange.com/