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
|
テンプレート
|
|
