phpのajax通信（非同期通信）

###前提・実現したいこと
実現したいことは、html上にある画像をゾーンにドロップしたときに、その画像をphpに送信。
phpでは、そのデータを受け取り、受信がちゃんとできているかの確認メッセージを再びhtmlに送信する、といったものを作成したいと考えています。ちなみに、非同期通信でブラウザ上での遷移はしないものを考えています。

jQueryを使うのは、初心者で手探りな状態です。
解決に役立つアドバイスをもらえればと思います。よろしくお願いします。

###発生している問題・エラーメッセージ
phpへ送ったデータをうまく受信できていない。
$_POST['data']

###該当のソースコード
[html側]

<script type="text/javascript" charset="utf-8">
$(function(){
		// 「#droparea」エリアにドロップされた時の処理
		$('#droparea').droppable({
			......

			drop: function(ev, ui){// ドロップが完了したときの処理
            ......

                $(function(){

                 var data = {'data' : testdata};

                     $.ajax({
		       url:'./jquery.php',// 送信先のURL
		       type: "POST",// メソッド名
		       contentType: false,// サーバから(ブラウザに)送信するデータの形式
		       processData: false,// 文字列でないパラメータを文字列に変換するか     
		       dataType: 'json',// サーバから(ブラウザに)受信したデータの形式
		       data: data// サーバに送信するデータ
		       })
		       .done(function(data){// 通信が成功した場合の処理
		       console.log("success " + data);// 確認メッセージ用
		       $('#result').html(data);// phpから受信
		       })
		       .fail(function(jqXHR, textStatus, errorThrown){// 通信が失敗した場合の処理
		       console.log("error " + data);// 確認メッセージ用
		       $('#result').html(data);
		       });
		return false;
                 });
			}
		});	
	});
});
</script>

[php側]

<?php
header("Content-type:application/json; charset=utf8");//
if($_POST['data'])//ブラウザからデータを正しく受信したときの処理
{
  $success = "成功";
  echo json_encode($success);
}
else//ブラウザからデータを正しく受信できなかったときの処理
{
  $error = "失敗";
  echo json_encode($error);
}
?>

###試したこと
今は、通信がうまく言っているかを確認するために「data:」の部分には'data'という文字を送ってみました。

###補足情報(言語/FW/ツール等のバージョンなど)
jQueryを用いて書いています。バージョンは1.8です。

kei344

2016/09/23 14:10

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

kei344

2016/09/24 06:03

「うまく受信できていない」とはどのような状況でしょうか。エラーが出るのであればそれを追記ください。JavaScriptのエラーはデベロッパーツールで確認できます。http://eng-entrance.com/javascript-display-error

asus_linux

2016/09/24 06:57

早速、エラーの確認をしてみました。エラー内容は、ReferenceError : testdata is not defined、と表示されます。（質問内容のコードとは異なりますが......） php側で、$data = $_POST[ 'data' ];で受信をします。ちゃんと受信出来たかの確認をするために echo = json_encode($data);で受信したデータをそのままhtmlに返す、といったことをしたいと考えているのですが、この部分が「うまく受信できていない」です。

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

回答2件

ベストアンサー

ReferenceError : testdata is not defined

testdata という変数が定義されていない、というエラーです。なのでAjax通信は始まっていませんね。

JavaScript
1// var data = {'data' : testdata};
2// ↓
3   var data = {'data' : 'testdata'}; // とりあえずテキストデータを渡す

投稿2016/09/24 07:08

kei344

総合スコア69398

asus_linux

2016/09/24 07:17 編集

なるほど！ .doneの部分で通信はうまくいっているみたいなのですが、phpから返ってきたデータに送信した値が「入っていないみたいなのですが.........。elseの方が実行されているみたいです。ちなみに、コンソールでの表示は「success 失敗」と表示されています。これは、どこが原因でデータを受信できていないのでしょうか...？