[DogFooding] WordPress AJAX Contact Form&Email Part II

[DogFooding] WordPress AJAX Contact Form&Email Part II

接上次文章[DogFooding] WordPress AJAX Contact Form&Email Part I.这部分的主要内容为:

1. 直接调用WordPress AJAX处理

2. 增强jQuery表单错误提示

3. 防止表单多次提交

所谓"Talk is cheap, Show me the code"

1. 直接调用WordPress AJAX处理

/*
 *PHPmailer init
 */
function customPhpMailer(PHPMailer $phpmailer) 
{
  $phpmailer->isSMTP();
  $phpmailer->Host = 'smtp.gmail.com';
  $phpmailer->Username = 'robin.li@ibomedia.ca'; 
  $phpmailer->Password = 'eXn1zJ1N'; 
  $phpmailer->SMTPAuth = true; 
  $phpmailer->SMTPSecure = 'ssl';
  $phpmailer->Port = 465;
  $phpmailer->From = "robin.li@ibomedia.ca";
  $phpmailer->FromName = "robin.li";
  $phpmailer->CharSet= "UTF-8";
  //$phpmailer->SMTPDebug = 2;
}
add_filter("phpmailer_init", "customPhpMailer");

/*
 *Send Email by HTML/Text
 */
function setContentType(){
    return "text/html";
}
add_filter( 'wp_mail_content_type','setContentType' );

/*
 *Event Form CallBack
 */
function eventFormCallBack() 
{
  
  if (empty($_POST["contact"])) {
      $contact = "";
  } else {
    $contact = $_POST['contact'];
  }

  if (empty($_POST["date"])) {
      $date = "";
  } else {
    $date = $_POST['date'];
  }

  if (empty($_POST["destination"])) {
      $destination = "";
  } else {
    $destination = $_POST['destination'];
  }

  if (empty($_POST["name"])) {
      $name = "";
  } else {
    $name = $_POST['name'];
  }

  if (empty($_POST["person"])) {
      $person = "";
  } else {
    $person = $_POST['person'];
  }

  //Email send
  $to = "xlcoder166@gmail.com";
  $subject = "{$name} Travl Info 咨询信息";
  $message = "新的客户资讯,信息如下: <br> 客户姓名: {$name} <br> 客户联系方式: {$contact} <br> 客户出行人数: {$person} <br> 客户出行日期: {$date} <br> 客户出行目的地: {$destination} <br> 请及时联系客户. ";
  $send = wp_mail($to, $subject, $message);
  
  //Success Response Status
  $result = ["status" => ""];
  if(!$send) {
    $result["status"] = "error";
  } else {
    $result["status"] = "success";
  }

  print json_encode($result);
  //Change Default response status
  die();
}
add_filter('wp_ajax_event_form', 'eventFormCallBack');
add_filter('wp_ajax_nopriv_event_form', 'eventFormCallBack');
}

1. 通过phpmailer修改默认SMTP设置

2. 修改发送邮件的类型

3. 通过内部ajax处理邮件发送

2.增强jQuery表单错误提示&3.防止表单多次提交

jQuery(document).ready(function ($) {
  //刷新页面取消表单发送限制
  $(".contact-btn").removeAttr("disabled","disabled");

  //表单验证与AJAX发送
  $("#event-form").validate({
    rules: {
      username: "required", 
      contact: "required",
      person: "required",
      date: "required",
      destination: "required"
    },
    messages: {
      username: "请输入你的姓名",
      contact: "请输入你的联系电话或邮件",
      person: "请输入你的出行人数",
      date: "请输入你的出行日期",
      destination: "请输入你的目的地"
    },
    submitHandler: function(form) {
        //预防多次发送
        $(".contact-btn").attr("disabled","disabled");

        var formData = {
          action: "event_form",
          name: $('#username').val(),
          contact: $('#contact').val(),
          person: $('#person').val(),
          date: $('#date').val(),
          destination: $('#destination').val(),
        };

        $.ajax({
            type: "POST",
            url: "/wp-admin/admin-ajax.php",
            dataType: "JSON",
            data: formData,
            beforeSend: function() {
              $(".msgSubmit").text("请稍候,邮件正在发送中...");
            },
            success: function(text) {
              if (text.status == "success"){
                  $(".msgSubmit").text("Email Send Success");
              } else {
                  $(".msgSubmit").text("Email Send Fail");
              }             
            },
            error: function(jqXHR, textStatus) {
              var msg = "";

              switch (jqXHR.status) {
                case 0:
                  msg = "Not connect. Verify Network";
                break;

                case 404:
                  msg = "Requested page not found. ";
                break;
                
                case 500:
                  msg = "Internal Server Error [500].";
                break;

                case 504:
                  msg = "Time Out";
                break;

                default: 
                  msg = "Nothig error";
                break;
              }

              $(".msgSubmit").text(msg);
            }
        });
      }
  });

});

1. 通过改写Btn属性,预防多次提交

2. 通过switch,增加错误处理

从此以后,就告别各种插件,过上幸福愉快的生活啦 大雾(....