More than 3 years have passed since last update.

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

Posted at 2020-12-21

非同期でメール送信方法（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>

送信が完了しました。

```

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

```

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 = 'ｘｘ様へ

';
$content_head .= 'いつもお世話になっております。Operator Companyです。'.'
';
$content_head .= '以下の内容でお問合せの受付が完了いたしました。'.'

';
//本文（フッター）
$content_foot = '
回答まで少々お待ちくださいませ。'.'
';
$content_foot .= '確認させて頂き、ご連絡申し上げます。'.'
';
} else if( $way == 'toOperator' ) {
$from = $em_user;
$to = $em_operator;
$from_name = '利用者様';
$subject = '【Operator】お問合わせ受け付けました。';
//本文（ヘッダー）
$content_head = 'Operator運用者'.' 様へ

';
$content_head .= 'ご利用者様から以下の内容で問い合わせがありました。'.'
';
$content_head .= 'ご確認お願いします。'.'

';
//本文（フッター）
$content_foot = '
確認したあと、ご利用者様へご連絡お願いします。'.'
';
}
// mailヘッダー（タイトル）の文字変換
$subject = mb_encode_mimeheader($subject, "JIS");
// mailボディー
$body = '

';
$body .= $content_head;
$body .= '- 企業名：'.$f_com.'
';
$body .= '- 氏名：ｘｘ様
';
$body .= '- 選択項目：'.$f_type.'
';
$body .= '- お問合せ内容：'.$f_text.'
';
$body .= $content_foot;
$body .= '';
$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に戻る。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up