ajaxでpostした際に吐き出されるdataに格納されているResponseの内容を表示するには

Ajaxを使用してpostしたデータをPHPで表示させるまでのやり方がわからないのでご教授願います。

<common.js>

javascript
1$(function() {
2  $('input[name=hoge]').click(function() {
3	  var param = {sendData  : $(this).val()};
4	  $.ajax( {
5		  url : "index.php",
6		  cache : false,
7		  type:"POST",
8		  data : {sendData  : $(this).val()},
9		  success: function(data){
10			 $('sendData').html(param)
11		  },
12		  error: function(XMLHttpRequest, textStatus, errorThrown) {
13		  },
14	  });
15  });
16});

<index.php>

PHP
1<?php
2//ConfigDataの参照
3require_once (dirname(__FILE__) . '/templates/config.php');
4//Templateになるheader.phpをリクワイア
5require_once (dirname(__FILE__) . '/templates/header.php');
6
7require_once (dirname(__FILE__) . '/templates/body.php');
8
9
10
11var_dump($_POST['sendData']);
12
13if (isset($_POST['sendData']))
14{
15    //ここに何かしらの処理を書く（DB登録やファイルへの書き込みなど）
16    echo "OK";
17}
18else
19{
20    echo 'The parameter of "request" is not found.';
21}
22?>

<body.php>

php
1<?php
2?>
3<h2>ajaxテストプロジェクト</h2>
4<form method="POST">
5	<input type="button" name="hoge" value="viewA">
6	<input type="button" name="hoge" value="viewB">
7</form>

common.jsに記載している "$('sendData').html(param)" の
(param)を(data)に変更したのですがpostによる結果の表示までいたりませんでした。

43185より

その場合、data に Response 内容が格納されているので、それを表示させます。
中身は console.log(data); で確認ができるので、それを表示したい内容の加工するだけです。

とご教授をいただいておりますが、表示まで至っておりません。
極力ページのリロードを行わないようにしたいです。

ページの遷移比較ができるように追記掲載します

以下現行のページ表示状態

html
1	</head>
2	<body>
3	<h1>テストプロジェクト</h1>
4	</body>
5</html><h2>ajaxテストプロジェクト</h2>
6<form method="POST">
7	<input type="button" name="hoge" value="viewA">
8	<input type="button" name="hoge" value="viewB">
9</form><pre class='xdebug-var-dump' dir='ltr'><font color='#3465a4'>null</font>
10</pre>The parameter of "request" is not found.

現行の表示されているページイメージ

以下、期待する遷移後のページ結果

html
1<!DOCTYPE html>
2<html>
3	<head>
4
5～～～～～略～～～～
6	</head>
7	<body>
8	<h1>テストプロジェクト</h1>
9	</body>
10</html><h2>ajaxテストプロジェクト</h2>
11<form method="POST">
12	<input type="button" name="hoge" value="viewA">
13	<input type="button" name="hoge" value="viewB">
14</form><pre class='xdebug-var-dump' dir='ltr'><small>string</small> <font color='#cc0000'>'viewA'</font> <i>(length=5)</i>
15</pre>OK

結果イメージ

kei344

2016/08/03 11:36

console.log(data); は確認されましたか？どういったデータが入っていることを期待し、それをどう表示したいかがいまいちわかりません。

Lhankor_Mhy

2016/08/03 12:12

『期待する遷移後のページ結果』とは具体的にはなんのことですか？　Ajaxなのでページ遷移はしないと思うのですが、この場合の「遷移」とは何を表しますか？

JimMachine

2016/08/04 13:34

「遷移」とは「うつりかわり」ですよね？ページ上で表示されているデータが移り変わらないことから「遷移したい」と言葉をチョイスいたしました。これで誤解がとけるのであれば幸いです。

kei344

2016/08/04 14:58

「ページ遷移」という慣用表現があるので、「遷移」を使うと伝わらない可能性が上がります。http://web-tan.forum.impressrd.jp/e/2016/03/29/22486

Lhankor_Mhy

2016/08/05 05:57

『データが移り変わらないことから「遷移したい」』とは具体的にはどういうことでしょうか。『期待する遷移後のページ結果』のとは、具体的にはユーザーがどのようなアクションをした「後」の「ページ結果」ですか？

Lhankor_Mhy

2016/08/05 08:24

要は、『期待する遷移後のページ結果』とは「このページを開いた時に表示されていてほしい結果」なのか、それとも「viewAなどのボタンを押した後に表示されていてほしい結果」なのか知りたい、ということなんです。

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

回答2件

ファイルの構成をみる限り、ajax の挙動や php の動作が分かっていないように思えます。
一度、体系だった学習をされるのが良いかと。
多分、ここでは説明しきれません。

どうしても今の「何かやりたいこと」を解消しなければならないのであれば、外注を検討されては？

投稿2016/08/03 15:21

退会済みユーザー

総合スコア0

JimMachine

2016/08/04 13:39

PHPやJSを初めて２週間程度です。ドットインストールを通して学習しておりますが、うまくいかないことがあればこちらを利用させていただいています。まず、”勉強”の一環なのでそれをお金で解決してしまうのは根本的に解決になりませんもしよければ上記に記載されているとおり勉強中の身ですので参考になるPHPやjsやjqueryの本を記載いただけると幸いです。

退会済みユーザー

2016/08/04 14:15

ドットインストールでなにが学べるのか、使用したことがないので分からないですが、体系だった学習ができるのであれば、まずはそれを一通り学ばれるのが良いかと。今の「何かやりたいこと」がないのであれば、先に一通りそちらを済ませてから質問するのが効率的です。

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

$('sendData').html(param)

これはparamが正しかったとしても、jQueryとしておかしいですね。
sendDataというタグはありませんので。

前の回答者さんが言っていたように

js
1console.log(data);

とすれば内容が確認できるとおもいますが、console.logでどこに出力されるのかわからなければ

js
1alert(data);

としてみてください。前のコードを残しておきたい場合は

js
1// $('sendData').html(param);
2alert(data);

としてください。
それでほしいテキスト（ OK )がポップアップで表示されたなら、あとはそれをjQueryを使って出力したい場所に出してあげるだけです。
出てきたポップアップが OK でないなら、php側の処理に問題があるかもしれません（何が出てきたか次第です）

「phpで表示させる」という点について：
コメントにも書かれているかもしれませんが、Ajaxにおいて、表示を担当するのはjavascriptです。
サーバー処理（php）は、リクエストを受け取ってサーバーで処理して結果を(テキストやjson形式で)返してあげるだけです。
それを受け取り、受け取った結果を画面にどう表示するかはjavascript側の仕事になります。

投稿2016/08/03 13:40

編集2016/08/03 13:45

flied_onion

総合スコア2604

JimMachine

2016/08/04 13:47

>Ajaxにおいて、表示を担当するのはjavascriptです。サーバー処理（php）は、リクエストを受け取ってサーバーで処理して結果を(テキストやjson形式で)返してあげるだけですなるほど。。ある資料ではPHPはHTMLを生成するというように記載されています。そちらの記載内容とは異なりますが、どちらが正なのでしょうかね？　それは別タイトルで質問をさせていただきますが JQueryを使用して取得できたdataを表示するようにしていけばいいということでしたので非常に参考になりました！例えば以下のようなページに記載されているようなことをするとうまくいきますか？ ttp://www.ezgate-mt.sakura.ne.jp/jquery/161.html 返信現在では確認できていないですが、返信後確認いたします。

flied_onion

2016/08/04 14:02

たしかにPHPはHTMLを生成します。言語的に何もしなければ出力文字をHTML形式としてブラウザに返却します。ただし、「HTMLを返す」のはPHPに限らずWebアプリケーションはブラウザが直接描画できるデータ（つまりHTML）をブラウザに返してあげるのが都合がいいからです。それがWebアプリケーションの基本動作です。ブラウザの「ページください」に対してHTMLを丸ごと返します。 Ajaxはjavascriptでサーバーと裏側で通信して、ページの部分書き換えを行います(ページの書き換えが目的でない場合書き換えない場合もあります)。これはブラウザが「ページください」と言っているのではなく、javascriptが「データください」と言っている状態です。受け取るのもjavascriptです。受け取ったデータをどう料理するかもjavascriptで記載してあげる必要があります。このときWebアプリケーション（サーバー）が作るデータは、javascript(であなたが書いたコード）とサーバーのやり取りで都合のいい形でやりとりします。HTMLのテキストを返しても構いませんし、javascriptで書きやすいjson形式で返してもかまいません。決めの問題です。その決めたルールにのっとってサーバーはデータを返し、javascriptはそのルールにのっとったデータが来ると期待して処理を書きます。ページに記載されているのはJSONPの話なので別サーバーとajaxさせたいときに使うものです。HTMLを表示しているサイトと同一のサーバーとのやりとりであれば関係ありません。

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

あなたの回答