非同期でメール送信方法（jquery, ajax, php）

index.php　→　jquery(ajax)　→　php　の後、戻って
php　→　jquery(ajax)　→　jqueryのindex.php描画操作
の流れの処理を、必ず実装できたコードでちゃんとまとめ、
メール送信機能をどう実装すればよいか悩んでいる方にその方法を共有します。

環境の整理

開発環境：-
必要なファイル：index.php、index.js、sendmail.php

方法

index.phpでformを作成する。

index.php


<form id="form_body" name="form_body" method="post">
  <!-- input type="text" -->
  <input type="text" name="form_com" placeholder="企業名">
  <!-- select -->
  <select name="form_type">
        <option value="" selected="selected">選択項目</option>
        <option value="A項目">A項目</option>
        <option value="B項目">B項目</option>
        <option value="C項目">C項目</option>
        <option value="D項目">D項目</option>
        <option value="E項目">E項目</option>
  </select>
  <!-- textarea -->
  <textarea name="form_text"></textarea>
  <!-- checkbox -->
  <label>個人情報の取扱いについての同意します。
  <input type="checkbox" name="form_agree" value="okay">
  <span class="chk"></span>
  </label>
  <p>同意ができていません</p>
  <!-- submit -->
  <button type="submit" name="form_submit" value="Submit">送信</button>
</form>
<!-- 以下、送信成功時、表示しようとするメッセージ　-->
<div id="form_successMsg" class="contact-success">
    <p>送信が完了しました。</p>
</div>

読込先jquery（＝今回index.js）にて、「送信」ボタンが押下された時の処理を作成する。
　　必須input欄は未入力時、エラーを表示させるなど
　（＝phpでやる場合が多いと思うが、今回はjsで行う。）

index.js


// id="form_body"がsubmitされた時
$("#form_body").submit(function () {
let submit = true;
let method = 'POST';
let url = '/sendmail.php';
let formData = $(this).serialize(); // formのデータ一式
// input type="text"
if ($("input[name='form_com']").val() == '') {
$("input[name='form_com']").addClass("error");
$("input[name='form_com']").attr('placeholder', '「企業名」入力ができていません');
submit = false;
} else {
$("input[name='form_com']").removeClass("error");
}
// select
if ($("select[name='form_type']").val() == '') {
$("select[name='form_type']").addClass("error");
$("select[name='form_type'] option:selected").text('「選択項目」が選択できていません')
submit = false;
} else {
$("select[name='form_type']").removeClass("error");
}
// textarea
if ($("textarea[name='form_text']").val() == '') {
$("textarea[name='form_text']").addClass("error");
$("textarea[name='form_text']").attr('placeholder', '「内容」入力ができていません');
submit = false;
} else {
$("textarea[name='form_text']").removeClass("error");
}
// checkbox
if ($("input[name='form_agree']:checked").val() != 'okay') {
$(".btn-errmsg").addClass("error");
submit = false;
} else {
$(".btn-errmsg").removeClass("error");
}
// 以下、ajaxの処理
if (submit == true) {
$.ajax({
  type: method,
  url: url,
  data:
  {
    formData: formData,
    formFrom: 'passMsg'
  },
  dataType: false, //通信結果を受け取らない場合はfalse
  success: function (data) {
    // ajax通信成功時の処理
    // console.log('success:' + data);
    // 以下、送信成功時のメッセージを表示させる
    $('#form_successMsg').fadeIn(1000);
    // 以下、既存のformは非表示させる
    $('#form_body').fadeOut(500);
  },
  error: function (xhr, status, error) {
    // ajax通信成失敗の処理
    console.log('error:' + error);
  }
});
}
return false;
});

jqueryのajaxから送られるdata（formData, formFrom）を受け取るsendmail.phpを作成する。

sendmail.php


<?php
// index.jsのajaxから送られて来たかを確認する
if ($_POST['formFrom'] == 'passMsg') {
// parse_str：文字列を処理し、変数に代入する
parse_str($_POST['formData'], $output);
foreach($output as $key=>$value){
if($key == 'form_com') $f_com = $value;
if($key == 'form_type') $f_type = $value;
if($key == 'form_text') $f_text = $value;
if($key == 'form_agree') $f_agree = $value;
}
// formDataのデータが有れば、メール送信
if (
isset($f_com) &&
isset($f_type) &&
isset($f_text) &&
isset($f_agree)
) {
mb_language("japanese");
mb_internal_encoding("UTF-8");
$em_operator = 'aaa@gmail.com';
$em_user = 'bbb@gmail.com';
// ＝＞ユーザー
sendMail( 'toUser', $em_operator, $em_user, $f_com, $f_type, $f_text );
// ＝＞Operator
sendMail( 'toOperator', $em_operator, $em_user, $f_com, $f_type, $f_text );
}
}
function sendMail( $way, $em_operator, $em_user, $f_com, $f_type, $f_text ) {
// $from: mail送信者
// $to: mail宛先
// $from_name: mailヘッダー（送信者の名前）
// $subject: mailヘッダー（タイトル）
if( $way == 'toUser' ) {
$from = $em_operator;
$to = $em_user;
$from_name = 'Operator Company';
$subject = '【Operator】お問合わせありがとうございます。';
//本文（ヘッダー）
$content_head = 'ｘｘ 様へ<br><br>';
$content_head .= 'いつもお世話になっております。Operator Companyです。'.'<br>';
$content_head .= '以下の内容でお問合せの受付が完了いたしました。'.'<br><br>';
//本文（フッター）
$content_foot = '<br>回答まで少々お待ちくださいませ。'.'<br>';
$content_foot .= '確認させて頂き、ご連絡申し上げます。'.'<br>';
} else if( $way == 'toOperator' ) {
$from = $em_user;
$to = $em_operator;
$from_name = '利用者様';
$subject = '【Operator】お問合わせ受け付けました。';
//本文（ヘッダー）
$content_head = 'Operator運用者'.' 様へ<br><br>';
$content_head .= 'ご利用者様から以下の内容で問い合わせがありました。'.'<br>';
$content_head .= 'ご確認お願いします。'.'<br><br>';
//本文（フッター）
$content_foot = '<br>確認したあと、ご利用者様へご連絡お願いします。'.'<br>';
}
// mailヘッダー（タイトル）の文字変換
$subject = mb_encode_mimeheader($subject, "JIS");
// mailボディー
$body = '<html><body>';
$body .= $content_head;
$body .= '- 企業名：'.$f_com.'<br>';
$body .= '- 氏名：ｘｘ 様<br>';
$body .= '- 選択項目：'.$f_type.'<br>';
$body .= '- お問合せ内容：'.$f_text.'<br>';
$body .= $content_foot;
$body .= '</body></html>';
$body = mb_convert_encoding($body, 'ISO-2022-JP');
// mailヘッダー情報
$headers = 'From: '.$from_name.' <' . $from . ">\r\n";
$headers .= 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-Type: text/html; charset=ISO-2022-JP';
// Bcc 必要であれば
// $headers .= 'Bcc: xxx@gmail.com, xxx@gmail.co.jp';
if(mail($to, $subject, $body, $headers)){
echo $result = 'success';
} else {
echo $result = 'failed';
};
}
?>

＊$resultでechoされたのは、ajax dataとして、successに戻る。