jQuery $.ajax JSON形式のPOST

解決済

質問者：sct-9
質問日時：2011/05/23 16:28
回答数：5件

jQuery $.ajax JSON形式のPOSTでフォーム内容を送信し、送信先のPHPでメール送信させるプログラムをかいているのですが、どうしても$.ajaxのerrorが呼び出される状況です。errorが呼び出されますが、PHPの方のメール送信はできております。
PHP側の出力がうまくいっていないのではないかと思いますが、原因がわかりません。どなたかご教授いただけないでしょうか？宜しくお願いします。

---js---

$("#send").click(function(){
var NAME = $('#name').val();
var EMAIL = $('#email').val();
var TITLE = $('#titlel').val();
var COMMENT = $('#comment').val();
$.ajax({
url : "sendmail.php",
dataType : "json",
data : {name:NAME, email:EMAIL, title:TITLE, comment:COMMENT},
type : "post",
success : function(data){
if(data != ''){
alert(data.result);
}
},
error : function(){
alert("通信に失敗しました。");
}
});
});

---sendmail.php---

if($_SERVER["REQUEST_METHOD"] != "POST"){
header("HTTP/1.0 404 Not Found");
return;
}else{
//メール送信処理　（省略）
$message = "送信完了メッセージ";
$result = array('result' => $message);
echo json_encode($result);
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.5ベストアンサー

回答者： mikemike7
回答日時：2011/05/24 00:57

解決案です。

$("#send").click(function(){
を
$("#inputForm").submit(function(){
に変える

});
});
});
</script>

を

});
return false;
});
});
</script>

に変える

以上でお試し下さい。

この回答への補足

ありがとうございます！正常にsuccessが返ってくるようになりました！
解決策がみつからず困惑していたので本当に感謝しております。
色々と勉強になりました。ありがとうございました！

補足日時：2011/05/24 16:35

通報する

- 0
- 件

通報する

この回答へのお礼

色々と考えていただいて本当にありがとうございました！

通報する

お礼日時：2011/05/24 16:36

No.4

回答者： mikemike7
回答日時：2011/05/23 22:30

>AJAXで書き換えたページ（index.php#mail.php）内でさらにajaxでPOST送信しているためうまく通信がいっていないのではないかと。

。。
HTMLファイルに問題あるなら、
その部分のソースがないと判断しづらいかと思うのですが。

しかし、送信がうまくいってるのに受け取りでエラーというのは変ですねえ。
単純に、通信だけさせる新しいHTMLファイルを作って、
そのHTMLから通信したらどうなります？

この回答への補足

formだけの新しいHTMLファイルで同じようにsendmail.phpに$.ajaxでPOST送信してみましたが、同じようにalert("通信に失敗しました。")が出力されました。やはりメールは送信されています。

以下、HTMLファイルです。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5 …
<script>
$(function(){
$("#send").click(function(){
var NAME = $('#name').val();
var EMAIL = $('#email').val();
var TITLE = $('#mail-title').val();
var COMMENT = $('#comment').val();
$.ajax({
url : "sendmail.php",
dataType : "json",
data : {name:NAME, email:EMAIL, title:TITLE, comment:COMMENT},
type : "post",
success : function(data){
if(data != ''){
alert(data.result);
}else{
alert("empty callback");
}
},
error : function(){
alert("通信に失敗しました。");
}
});
});
});
</script>
</head>
<body>
<div id="inner">
<form method="post" id="inputForm">
<div class="item">
<div class="text-box">
<img src="images/contact/name.gif" alt="NAME" />
</div>

<div class="input-box">
<input type="text" size="30" id="name" name="name" />
</div>
</div>

<div class="item">
<div class="text-box">
<img src="images/contact/email.gif" alt="EMAIL" />
</div>

<div class="input-box">
<input type="text" size="30" id="email" name="email" />
</div>
</div>

<div class="item">
<div class="text-box">
<img src="images/contact/title.gif" alt="TITLE" />
</div>

<div class="input-box">
<input type="text" size="30" id="mail-title" name="title" />
</div>
</div>

<div class="item">
<div class="text-box">
<img src="images/contact/message.gif" alt="MESSAGE" />
</div>

<div class="input-box">
<textarea rows="5" cols="40" id="comment" name="comment"></textarea>
</div>
</div>

<div class="button-box">
<div class="button-left">
<input type="image" name="submit" id="send" value="送信" src="images/contact/next-off.gif" alt="送信" />
</div>
</div>
</form>
</div>

</body>
</html>

補足日時：2011/05/23 23:55

通報する

- 0
- 件

通報する

No.3

回答者： mikemike7
回答日時：2011/05/23 21:30

>JSON以外の余計な文字列というのはどういうものでしょうか？

{"result":"\u9001\u4fe1\u5b8c\u4e86\u30e1\u30c3\u30bb\u30fc\u30b8"}
以外に出力された文字ということです。
aaa{"result":"\u9001\u4fe1\u5b8c\u4e86\u30e1\u30c3\u30bb\u30fc\u30b8"}
では通信でエラーになります。

これはPHP側で意図して出力した文字列のみを対象とするものではなく、
たとえば、PHPエラーの記載などが原因となることもあります。

今は、どの段階でエラーが発生しているのかを
特定するのが先決だと思うので、その為に、単純に
$message = "送信完了メッセージ";
$result = array('result' => $message);
echo json_encode($result);
とだけ書かれたPHPと通信してみてはいかが。と記載したわけです。

上記の3行のPHPとの通信で
alert(data.result)が出力　→　sendmail.phpに問題
alert("通信に失敗しました。")が出力　→　通信の指定に問題
と問題点を絞ることができます。
絞ることができれば、その部分を修正してみればいいわけです。

ということで、まずは3行のPHPとajax通信してみてはいかがでしょう。

この回答への補足

なるほど。ありがとうございます。

$message = "送信完了メッセージ";
$result = array('result' => $message);
echo json_encode($result);

の３行のPHPに送信してみましたが、alert("通信に失敗しました。")が出力されています。
通信そのものに問題があるようです。

AJAXで書き換えたページ（index.php#mail.php）内でさらにajaxでPOST送信しているためうまく通信がいっていないのではないかと。。。

色々とお手数おかけします。

補足日時：2011/05/23 22:08

通報する

- 0
- 件

通報する

No.2

回答者： mikemike7
回答日時：2011/05/23 20:39

ローカルで試してみましたが、私の環境では正常に取得できました。

sendmail.phpでJSON以外の余計な文字列が含まれていることは考えられませんか？

今回作成した3行のPHPをajaxで通信して
正常に表示されるならsendmail.phpに問題があるということですよね。

この回答への補足

ご丁寧な回答感謝します。ありがとうございます。

JSON以外の余計な文字列というのはどういうものでしょうか？

たいへん恐縮ですが、下記にsendmail.phpを記載しておきますので問題があればご指摘いただければ幸いです。

sendmail.phpは以下の通りです。宜しくお願いします。

---sendmail.php---

<?php
require_once("includes/common.php");

if($_SERVER["REQUEST_METHOD"] != "POST"){
//POST以外ははじく
header("HTTP/1.0 404 Not Found");
return;
}else{
// POSTされたデータをチェック
$_POST = checkInput($_POST);

// 変数にセッション変数を代入
$name = $_POST['name'];
$email = $_POST['email'];
$title = $_POST['title'];
$comment = $_POST['comment'];
$comment_all = <<<EOF
お問い合わせ

From：$name
Mail：$email
Title:$title
------------------------------------------------------------
$comment
EOF;

//以下、PEARのmailで送信処理

// mb_encode_mimeheader用エンコードの設定
mb_language("japanese");
mb_internal_encoding("UTF-8");

require_once 'Mail.php';
require_once 'Mail/mime.php';

// (1) Mail_Mimeクラスのインスタンス化
$mime = new Mail_Mime("\n");
// (2) テキスト本文の設定
$mime->setTxtBody( $comment_all );
// (3) 添付ファイルの指定($upfileが存在する場合のみ)
$filename = "images/upload/" . $upfile;
if(!$upfile == ""){
$mime->addAttachment("images/upload/" . $upfile, "MIME_Type::autoDetect($filename)");
}else{

}
// (4) メッセージの設定
$bodyParam = array(
"head_charset" => "ISO-2022-JP",
"text_encoding" => "ISO-2022-JP",
"text_charset" => "UTF-8"
);
// (5) メッセージを構築
$body = $mime->get($bodyParam);

$addHeaders = array(
'From' => $email,
'To' => SHOP_EMAIL,//メール宛先
'Subject' => mb_encode_mimeheader('[Contact to XXXX]' . $title)
);
// (6) ヘッダ行を構築
$headers = $mime->headers($addHeaders);

$params = array(
'host' => HOST,//SMTPサーバー
'port' => 587,
'auth' => true,
'username' => USERNAME,//メールアカウント
'password' => PASSWORD //パスワード
);
$recipients = SHOP_EMAIL;//メール宛先

$smtp = Mail::factory( 'smtp', $params );

$e = $smtp->send( $recipients, $headers, $body );

// 送信結果をお知らせする変数を初期化
$message = '';

if(PEAR::isError($e)){
$message = '送信に失敗しました。';
}else{
$message = 'メッセージは送信されました。ありがとうございました。';
}

$result = array("result" => $message);
echo json_encode($result);
}
?>

補足日時：2011/05/23 21:07

通報する

- 0
- 件

通報する

No.1

回答者： mikemike7
回答日時：2011/05/23 19:03

情報が少ないので、原因は特定しづらいですが、

sendmail.phpの文字コードはなんでしょう？
json_encodeは確かUTF-8の文字列でなければ変換できなかったと思います。
もしも、UTF-8以外の文字コードでsendmail.phpが書かれているなら、
$messageの文字コードをUTF-8に変換してあげることで解決するかもしれません。

他に考えられるとしたら、json_encodeが使えない環境。
PHP5.2以上でなければ使用できなかったと思います。
エラー表示、または何も出力されない場合、JS側でもエラーになると思います。

とりあえず、

$message = "送信完了メッセージ";
$result = array('result' => $message);
echo json_encode($result);

だけ書かれたPHPを作って、表示してみて、
正常に書き出されているか確認すると良いかもしれません。

この回答への補足

ご回答ありがとうございます。

ご指摘のような
$message = "送信完了メッセージ";
$result = array('result' => $message);
echo json_encode($result);

だけのphpを作り試したところ、
{"result":"\u9001\u4fe1\u5b8c\u4e86\u30e1\u30c3\u30bb\u30fc\u30b8"}
と、正常に出力しているようです。

PHPは5.3.0です。

あと、ajaxで書き換えたページ内でajaxを利用し、POSTしています。
コールバックを受け取る際、そこに問題がある可能性があるのではないかと思いますが知識がないためわかりません。
何か糸口をご存じであればご指導お願いします。