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

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

ただいまの
回答率

90.46%

  • PHP

    24641questions

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

  • JavaScript

    21072questions

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

  • jQuery

    8389questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Ajax

    1358questions

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

  • jQuery UI

    190questions

    jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

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

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,357

JimMachine

score 1

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

<common.js>

$(function() {
  $('input[name=hoge]').click(function() {
      var param = {sendData  : $(this).val()};
      $.ajax( {
          url : "index.php",
          cache : false,
          type:"POST",
          data : {sendData  : $(this).val()},
          success: function(data){
             $('sendData').html(param)
          },
          error: function(XMLHttpRequest, textStatus, errorThrown) {
          },
      });
  });
});


<index.php>

<?php
//ConfigDataの参照
require_once (dirname(__FILE__) . '/templates/config.php');
//Templateになるheader.phpをリクワイア
require_once (dirname(__FILE__) . '/templates/header.php');

require_once (dirname(__FILE__) . '/templates/body.php');



var_dump($_POST['sendData']);

if (isset($_POST['sendData']))
{
    //ここに何かしらの処理を書く(DB登録やファイルへの書き込みなど)
    echo "OK";
}
else
{
    echo 'The parameter of "request" is not found.';
}
?>

<body.php>

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

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

43185より

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

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

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

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

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

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

![現行の表示結果イメージ](70e20e3da2e272055d64e7a26dd11113.png)

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

<!DOCTYPE html>
<html>
    <head>

~~~~~略~~~~
    </head>
    <body>
    <h1>テストプロジェクト</h1>
    </body>
</html><h2>ajaxテストプロジェクト</h2>
<form method="POST">
    <input type="button" name="hoge" value="viewA">
    <input type="button" name="hoge" value="viewB">
</form><pre class='xdebug-var-dump' dir='ltr'><small>string</small> <font color='#cc0000'>'viewA'</font> <i>(length=5)</i>
</pre>OK

結果イメージ

期待するページ結果

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/08/04 23:58

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

    キャンセル

  • Lhankor_Mhy

    2016/08/05 14:57

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

    キャンセル

  • Lhankor_Mhy

    2016/08/05 17:24

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

    キャンセル

回答 2

+2

$('sendData').html(param)

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

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

console.log(data);


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

alert(data);


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

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

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


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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/04 22:47

    >Ajaxにおいて、表示を担当するのはjavascriptです。
    サーバー処理(php)は、リクエストを受け取ってサーバーで処理して結果を(テキストやjson形式で)返してあげるだけです

    なるほど。。
    ある資料ではPHPはHTMLを生成するというように記載されています。
    そちらの記載内容とは異なりますが、どちらが正なのでしょうかね?
     それは別タイトルで質問をさせていただきますが
    JQueryを使用して取得できたdataを表示するようにしていけばいいということでしたので非常に参考になりました!
    例えば以下のようなページに記載されているようなことをするとうまくいきますか?
    ttp://www.ezgate-mt.sakura.ne.jp/jquery/161.html
    返信現在では確認できていないですが、返信後確認いたします。

    キャンセル

  • 2016/08/04 23:02

    たしかにPHPはHTMLを生成します。言語的に何もしなければ出力文字をHTML形式としてブラウザに返却します。
    ただし、「HTMLを返す」のはPHPに限らずWebアプリケーションはブラウザが直接描画できるデータ(つまりHTML)をブラウザに返してあげるのが都合がいいからです。
    それがWebアプリケーションの基本動作です。ブラウザの「ページください」に対してHTMLを丸ごと返します。

    Ajaxはjavascriptでサーバーと裏側で通信して、ページの部分書き換えを行います(ページの書き換えが目的でない場合書き換えない場合もあります)。これはブラウザが「ページください」と言っているのではなく、javascriptが「データください」と言っている状態です。受け取るのもjavascriptです。受け取ったデータをどう料理するかもjavascriptで記載してあげる必要があります。
    このときWebアプリケーション(サーバー)が作るデータは、javascript(であなたが書いたコード)とサーバーのやり取りで都合のいい形でやりとりします。HTMLのテキストを返しても構いませんし、javascriptで書きやすいjson形式で返してもかまいません。決めの問題です。その決めたルールにのっとってサーバーはデータを返し、javascriptはそのルールにのっとったデータが来ると期待して処理を書きます。

    ページに記載されているのはJSONPの話なので別サーバーとajaxさせたいときに使うものです。HTMLを表示しているサイトと同一のサーバーとのやりとりであれば関係ありません。

    キャンセル

+2

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/04 22:39

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

    もしよければ上記に記載されているとおり勉強中の身ですので参考になるPHPやjsやjqueryの本を記載いただけると幸いです。

    キャンセル

  • 2016/08/04 23:15

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

    キャンセル

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

  • ただいまの回答率 90.46%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • PHP

    24641questions

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

  • JavaScript

    21072questions

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

  • jQuery

    8389questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Ajax

    1358questions

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

  • jQuery UI

    190questions

    jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。