2017年05月23日

mb_send_mail を使用したメール送信テンプレート : jQuery の $.ajax で、FormData オブジェクトを送信する



1) 別ドメインでも ajax が動作するように、Access-Control-Allow-Origin: * をセット
2) ブラウザの入力チェック機能を使う為に、FORM 内に入力を配置( 但し name 属性なし )
3) $.ajax の戻りとして JSON データを使用しているが、テストの為 JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE を指定

send_jquery_ajax.php
<?php
session_cache_limiter('nocache');
session_start();

$page_title = "メール送信(jQuery ajax POST)";

?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title><?= $page_title ?></title>
<style>
body {
	background-color: lemonchiffon;
}

#main {
	padding: 20px 0px 20px 100px;
}

.btn {
	width: 70px;
}
</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

var gdata;

$( function(){

	$("#mail_form").on("submit", function(){

		if ( !confirm("メールを送信しますか?") ) {
			return false;
		}

		// **************************************
		// サーバへ送信
		// **************************************

		// 新規送信用オブジェクト
		var formData = new FormData();

		// 送信フィールド作成
		formData.append("to", $("#to").val());
		formData.append("subject", $("#subject").val());
		formData.append("body", $("#body").val());

		// **************************************
		// サーバ呼び出し
		// **************************************
		$.ajax({
			url: "./post_action.php",
			type: "POST",
			data: formData,
			processData: false,
			contentType: false
		})
		// 成功
		.done(function( data, textStatus ){
			gdata = data;
			console.log( "status:" + textStatus );
			console.log( "data:" + JSON.stringify(data, null, "    ") );

		})
		// 失敗
		.fail(function(jqXHR, textStatus, errorThrown ){
			console.log( "status:" + textStatus );
			console.log( "errorThrown:" + errorThrown );
		})
		// 常に実行
		.always(function() {

		})
		;

		// FORM からの送信はしない
		return false;
	} );


} );

function checkSubmit() {

	if ( !confirm("メールを送信しますか?") ) {
		return false;
	}

	return true;

}
</script>
</head>
<body>
<h3><?= $page_title ?></h3>

<div id="main">

	<form id="mail_form">
		<p>宛 先:<input id="to" type="email" required value="<?= $_SESSION["to"] ?>"></p>
		<p>件 名:<input id="subject"  type="text" value="<?= $_SESSION["subject"] ?>"></p>
		<p>本 文:<input id="body" type="text" value="<?= $_SESSION["body"] ?>"></p>
		<p><input type="submit" value="メール送信(jQuery)"></p>
	</form>

	<input  class="btn" type="button" value="リセット" onclick='location.href="<?= $_SERVER["PHP_SELF"] ?>"'>
	
</div>

</body>
</html>


post_action.php
<?php
session_cache_limiter('nocache');
session_start();

//header( "Access-Control-Allow-Origin: http://localhost" );
header( "Access-Control-Allow-Origin: *" );
header( "Content-Type: application/json; charset=utf-8" );

mb_language("Japanese");
mb_internal_encoding("UTF-8");

if ( $_SERVER["REQUEST_METHOD"] == "POST" ) {

	$_SESSION["to"] = $_POST["to"];
	$_SESSION["subject"] = $_POST["subject"];
	$_SESSION["body"] = $_POST["body"];

	$from_header = "From: " . mb_encode_mimeheader( mb_convert_encoding("差出人","iso-2022-jp") );

	// このソースを置くサーバから使えるメールアドレス
	$from_header .= " <ユーザ名@ドメイン>";

	$result = mb_send_mail($_POST["to"], $_POST["subject"], $_POST["body"], $from_header);
	if ( $result ) {
		$_POST["result"] = 'メールを送信しました';
	}
	else {
		$_POST["result"] = 'メール送信に失敗しました';
	}

}
else {
	$_POST["result"] = 'GET メソッドで呼び出されました。POSTメソッドを使用して下さい';
}

print json_encode($_POST,JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE  );

?>



posted by at 2017-05-23 20:14 | テンプレート | このブログの読者になる | 更新情報をチェックする