質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

6回答

8207閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2015/11/11 01:29

編集2015/11/11 03:03

###前提・実現したいこと
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の場合は第5引数が使えない 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側のソースを追加しました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答6

0

ベストアンサー

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はPHPファイルを読み込むことができないためPHPファイルだけ別のドメインで作っていました。 monacaでは実質、実現が不可能ということですね... すっぱりあきらめて別の方法を考えようと思います!
guest

0

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

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

0

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

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

  1. phpが引数なしで正常に呼び出せること
  2. ajaxで引数なしでphpが呼び出せること
  3. 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が引数なしで正常に呼び出せること つまりphp内をechoのみ、ajaxのdata内を空にしてという認識でよろしいでしょうか? その場合ですとアラートでerrorが出るだけでPHPは呼び出せていないようです。
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

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

0

こんにちは。
クライアント側は、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自体はほかにもプログラム内で動かしているので読み込まれていると思います。
guest

0

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(){が二重にあるのはコピペミスですねw 直しておきます。 教えていただいたように直して動かしてみたのですが、やはり動きません...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は読み込まれてるってことですね! 後はPHP側の問題なんでしょうか...?
icham

2015/11/11 08:26

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

退会済みユーザー

2015/11/11 08:49

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

2015/11/11 17:46

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

0

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

javascript

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

後、PHP側は呼ばれていますかね?

投稿2015/11/11 01:46

trick

総合スコア366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/11/11 01:50

回答ありがとうございます! {}や:も括ってますが何か意味があるんですか? PHPは呼ばれていないと思います。 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デバッガーを使っているのですが、エラーは出ていないので通っているんだと思います。(通っていなければ何かしらのエラーが出ると思うので)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問