Ajaxで、JavaScriptからPHPにデータを送る

###前提・実現したいこと
Ajaxを使ってJavaScriptからPHPにデータを送りたいのですが、Ajaxが読み込まれません。
どこか間違いなどあるのでしょうか？
Ajaxを触るのは今回が初めてなので自分で間違いがわかりません。
教えてください。
よろしくお願いします。

###エラーメッセージ
なし
###ソースコード

JavaScript
1
2   $(function(){
3            $(".btn>#btn1").on("click", function(){
4                alert("a");
5                var subject = $("#subject").val();  
6                var content = $("#content").val();
7            
8                //PHPにデータ送信         
9                alert("b");
10                $.ajax({
11                    type: 'POST',
12                    dataType: 'text',
13                    url: 'http://localhost/php/drk_mail/drk_mail.php',
14                    data: "item1 = subject & item2 = content",
15                    success:function(data){
16                        alert("送信完了");
17                    }
18                });
19            
20                alert("c");
21            });
22            
23        });
24

PHP
1
2	<?php
3	$subject = $_POST['item1'];
4	$content = $_POST['item2'];
5	
6	$mailTo      = '';       //宛先のアドレス
7	$mailFrom    = ''; //差出人のアドレス
8	$mailSubject = $subject;					//メールのタイトル
9	$mailMessage = $content;					//メールの本文
10	$returnMail  = $mailFrom;                   //Return-Pathに指定するアドレス
11	
12	//メールで日本語を使用するための設定
13	mb_language("Ja");
14	mb_internal_encoding("UTF-8");
15	
16    $header  = "From: $mailFrom\n";
17	$header .= "MIN-Version: 1.0\n";
18	$header .= "Content-Type: multipart/mixed; boundary=\"__PHPRECIPE__\"";
19	
20	$body  = "--__PHPRECIPE__\r\n";
21	$body .= "Content-Type: text/plain; charset=\"ISO-2022-JP\"\r\n";
22	$body .= "\r\n";
23	$body .= $mailMessage . "\r\n";
24	$body .= "--__PHPRECIPE__\r\n";
25	
26	//メールの送信と結果の判定 セーフモードがonの場合は第５引数が使えない
27	if(ini_get('safe_mode')){
28		$result = mb_send_mail($mailTo, $mailSubject, $body, $header);
29	}else{
30		$result = mb_send_mail($mailTo, $mailSubject, $body, $header, '-f-' . $returnMail);
31	}
32	if($result){
33		echo'<p>メールを送信しました。</p>';
34	}else{
35		echo'<p>送信に失敗しました。</p>';
36	}
37
38	?>

###補足情報(言語/FW/ツール等のバージョンなど)
PHP側のソースを追加しました。

行動規範の内容に同意します

回答6件

ベストアンサー

HTMLファイル (Ajax が記載されているファイル) をPHPと同じサーバーに配置しているのでしょうか？
基本的にAJAXはクロスドメイン制約というものがあり、同じサーバーに対してのみリクエストかけることができます。

補足：
ファイルが同じサーバーに置いてあるという意味ではなく、該当Javascript が記載されたHTMLファイルにブラウザでアクセスする際、同一のドメイン内でアクセスされていますか？

例：
○ http://localhost/test.html
× c:\document_root\test.html

投稿2015/11/11 07:59

編集2015/11/11 08:05

usk

総合スコア397

退会済みユーザー

2015/11/11 08:42

そうなんですか？！今回、monacaで作っていたんですが、monacaはＰＨＰファイルを読み込むことができないためＰＨＰファイルだけ別のドメインで作っていました。 monacaでは実質、実現が不可能ということですね... すっぱりあきらめて別の方法を考えようと思います！

行動規範の内容に同意します

以下のソースで動作確認できましたよ。

html
1<!DOCTYPE HTML>
2<html lang="en-US">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6	</head>
7	<body>
8
9		<input type="text" id="subject" value="subject" />
10		<input type="text" id="content" value="content" />
11		<div class="btn">
12			<button id="btn1">送信</button>
13		</div>
14		<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
15		<script type="text/javascript">
16			$(function () {
17				$(".btn>#btn1").on("click", function () {
18					var subject = $("#subject").val();
19					var content = $("#content").val();
20					//PHPにデータ送信
21					alert("b");
22					$.ajax({
23						type: 'POST',
24						dataType: 'text',
25						url: 'drk_mail.php',
26						data: {
27							item1: subject,
28							item2: content
29						},
30						success: function (data) {
31							alert("送信完了");
32						}
33					});
34					alert("c");
35				});
36			});
37		</script>
38	</body>
39</html>

php
1<?php
2
3/**
4 * drk_mail.php
5 *
6 * @since 2015/11/11
7 */
8$subject = $_POST['item1'];
9$content = $_POST['item2'];
10
11$mailTo = ''; //宛先のアドレス
12$mailFrom = ''; //差出人のアドレス
13$mailSubject = $subject;  //メールのタイトル
14$mailMessage = $content;  //メールの本文
15$returnMail = $mailFrom;	//Return-Pathに指定するアドレス
16//メールで日本語を使用するための設定
17mb_language("Ja");
18mb_internal_encoding("UTF-8");
19
20$header = "From: $mailFrom\n";
21$header .= "MIN-Version: 1.0\n";
22$header .= "Content-Type: multipart/mixed; boundary=\"__PHPRECIPE__\"";
23
24$body = "--__PHPRECIPE__\r\n";
25$body .= "Content-Type: text/plain; charset=\"ISO-2022-JP\"\r\n";
26$body .= "\r\n";
27$body .= $mailMessage . "\r\n";
28$body .= "--__PHPRECIPE__\r\n";
29
30//メールの送信と結果の判定 セーフモードがonの場合は第５引数が使えない
31if (ini_get('safe_mode')) {
32	$result = mb_send_mail($mailTo, $mailSubject, $body, $header);
33} else {
34	$result = mb_send_mail($mailTo, $mailSubject, $body, $header, '-f-' . $returnMail);
35}
36if ($result) {
37	echo'<p>メールを送信しました。</p>';
38} else {
39	echo'<p>送信に失敗しました。</p>';
40}

届いたメール本文

--__PHPRECIPE__
Content-Type: text/plain; charset="ISO-2022-JP"

content
--__PHPRECIPE__

--__PHPRECIPE__--

投稿2015/11/11 08:16

退会済みユーザー

総合スコア0

退会済みユーザー

2015/11/11 08:42

動作確認ありがとうございます！そんなに間違いはなかったということでしょうか... ちゃんと動くファイルが作れていてよかったとほっとしております。

退会済みユーザー

2015/11/11 09:04 編集

うーん、動かないものは間違いでしかないというしかないのですが…。間違いがたった1文字だとしても、それがわかるかわからないかの差が、素人とそうでない人の差ですからね…。どこが間違いだったかで終わるのではなく、どうやってデバッグするかという「スキル」を身につけましょう。それにこのソースだと、一切セキュリティ上の考慮がされていないので、実用に耐えうるものではありません。

行動規範の内容に同意します

こんにちは。
どこまで確認できているのかわからないので確認です。

http://localhost/php/drk_mail/drk_mail.php
とブラウザからアクセスしてエラーが発生していないことは確認済みですか？
引数はとりあえずなしで、php側も引数なしで、echoなどで確実にphpが呼び出せていることを確認する必要があると思います。

phpが引数なしで正常に呼び出せること
ajaxで引数なしでphpが呼び出せること
ajaxで引数ありでphpが呼び出せること

と言うようにステップを踏んで確認をした方がよいと思います。

投稿2015/11/11 05:53

miu7805

総合スコア12

退会済みユーザー

2015/11/11 06:11 編集

>http://localhost/php/drk_mail/drk_mail.php とブラウザからアクセスしてエラーが発生していないことは確認済みですか？ブラウザから直接アクセスすると、ポスト（ $subject = $_POST['item1'];、$content = $_POST['item2'];）の部分がデータが送られていないのでエラーが出ますがそれ以外では普通に動きます。＞1. phpが引数なしで正常に呼び出せることつまりｐｈｐ内をechoのみ、ajaxのdata内を空にしてという認識でよろしいでしょうか？その場合ですとアラートでerrorが出るだけでＰＨＰは呼び出せていないようです。

miu7805

2015/11/11 07:23 編集

ajaxからphpにアクセスするのではなく、単純にブラウザからphpにアクセスして実行できるかの確認です。例えば、 1.　test.phpと言うphpファイルをdrk_mail.phpと同じ階層に作成する 2. ブラウザのURL入力欄に「http://{localhostもしくは設定したIP}/php/drk_mail/test.php」と入力してEnter これでブラウザにaaaaaが表示されるかを確認する、と言うことです。 test.php ----------------------- <?php echo "aaaaa"; -----------------------

退会済みユーザー

2015/11/11 08:02

あ、それでしたら正常に呼び出すことができます。

miu7805

2015/11/11 08:22

なるほど。では次のステップへ…と思いましたが、「Kosuke_Shibuya」さんのコードと「usk」さんご指摘の配置を確認で解決できるようですね。

退会済みユーザー

2015/11/11 08:45

順を追っての細かい説明ありがとうございます！自分の知識が足らないゆえにたくさん説明させてすいませんでした...

行動規範の内容に同意します

こんにちは。
クライアント側は、alert "a", "b", "c" は表示されて、"送信完了"は表示されない、と推察しましたが、実際はいかがですか？
私はmonacaを利用したことが無いので的外れかもしれませんが、jQueryライブラリ自体はうまく読み込まれているでしょうか？
http://blog.ecoteki.com/webservice/post-414/
http://www.finefinefine.jp/jquery/kiji2117/

投稿2015/11/11 04:39

hsk

総合スコア728

退会済みユーザー

2015/11/11 04:41

仰るとおり、alert "a", "b", "c" は表示されて、"送信完了"は表示されない状態です。 jQuery自体はほかにもプログラム内で動かしているので読み込まれていると思います。

行動規範の内容に同意します

javascript
1$(function(){
2    $("#btn1").on("click", function(){
3        var subject = $("#subject").val();  
4        var content = $("#content").val();
5
6        //PHPにデータ送信         
7        $.ajax({
8            type: 'POST',
9            dataType: 'html',
10            url: 'http://localhost/php/drk_mail/drk_mail.php',
11            data: { item1: subject, item2: content}
12        }).done(function(data) {
13            alert("送信完了");
14        });
15    });
16});

こんな感じでしょうか？

javascript
1$(function(){ // 2重に要りません。
2         $(function(){
3
4
5$.ajax({
6    type: 'POST',
7    dataType: 'text', // <p>なんちゃら</P>なのでhtmlに。
8    url: 'http://localhost/php/drk_mail/drk_mail.php',
9    data: "item1 = subject & item2 = content", // URLのQueryStringと同じように。'item1=' +  subject + '&item2=' + content
10    success:function(data){ // 古い書き方でしたので。
11        alert("送信完了");
12    }
13});

あとjqueryは読み込んでいますか？

投稿2015/11/11 02:41

icham

総合スコア559

退会済みユーザー

2015/11/11 02:56

$(function(){が二重にあるのはコピペミスですねｗ直しておきます。教えていただいたように直して動かしてみたのですが、やはり動きません...orz 前後に設置したalertは反応しているのでajaxだけ読み込まれていないようです。 jQueryは正常に動いているので読み込んでいると思います。

icham

2015/11/11 04:13

通信しててもPHP側のエラーで返答がない可能性がありそうですがまずはchromeのデベロッパーツールでネットワークタブで通信しているか確認しましょう。あと、$.ajaxに以下を追加してみてエラー内容をみてみましょう。 $.ajax({ // 省略 }).done(function(data) { alert("送信完了"); }).fail(function( jqXHR, textStatus, errorThrown ) { alert(textStatus); }); 参考：http://js.studio-kingdom.com/jquery/ajax/ajax

退会済みユーザー

2015/11/11 04:58

デベロッパーツールを使ったことがないので見方がわからないのですが、どこをどう見たらいいんでしょうか？ $.ajaxにfailを追加したところ、アラートでerrorが出ました。 ajaxは読み込まれてるってことですね！後はＰＨＰ側の問題なんでしょうか...?

icham

2015/11/11 08:26

monacaでアプリを開発しているのでしょうか？LocalKitで開発であれば分かりませんが https://monaca.mobi/ja/のブラウザのIDEで開発して、monacaデバッガーで確認しているのであれば PHPをグローバルでアクセスできるサーバに置かないと基本ダメです。 ※ ネットワークに強いのであればルータの設定いじって、特定のIPアドレスをローカルPCに向けることはできると思いますが。

icham

2015/11/11 08:30

monacaデバッガーだとchromeのデベロッパーツール使うには環境の設定が必要だったと思います。参考:http://docs.monaca.mobi/cur/ja/manual/debugger/debug/#by-debugger-ide

退会済みユーザー

2015/11/11 08:49

度重なる質問に懲りずに回答していただいてありがとうございました！今回はタッチの差でuskさんをベストアンサーに選びましたが本当に感謝しています。教えていただいたデベロッパーツールは大変便利そうなので、重宝させていただきます！

icham

2015/11/11 17:46

monacaって、html＋js＋cssでアプリを作るやつですよね？ monacaであればクロスドメインの問題は関係ないですよ。クロスドメインが問題になるのはwebサイトです。公開はしていませんがmonacaでつくった経験はあります。ajax使いました。

行動規範の内容に同意します

データの書き方ですが、私はこう書いてます。

javascript
1data: "{item1: '" + subject + "',item2:'" + content + "'}"

後、ＰＨＰ側は呼ばれていますかね？

投稿2015/11/11 01:46

trick

総合スコア366

退会済みユーザー

2015/11/11 01:50

回答ありがとうございます！｛｝や：も括ってますが何か意味があるんですか？ＰＨＰは呼ばれていないと思います。 Ajaxがそもそも読み込まれていないので...

trick

2015/11/11 02:33

{} や : については、http://weble.org/2010/09/09/jquery-ajax-object この当たりが参考になると思います。ちなみに、data: "item1 = subject & item2 = content" この書き方ですと、item1に"subject" item2に"content"と言う文字列が送信されませんか？ ajax が読み込まれていないとの事ですがデバッグ時にajax は通りますか？この当たりも参考にしてみてください。 http://webcake.no003.info/webdesign/jquery-ajax-php-post-sample.html

退会済みユーザー

2015/11/11 03:02

参考まで張っていただいてありがとうございます！ >デバッグ時にajax は通りますか？ monacaデバッガーを使っているのですが、エラーは出ていないので通っているんだと思います。（通っていなければ何かしらのエラーが出ると思うので）

行動規範の内容に同意します

あなたの回答