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

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

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

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

JavaScript

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

Twig

Twig は、簡潔で可読性の高いテンプレートを記述することができ、 シンプルに記述することを目的として作られた PHPテンプレートエンジンです。

Ajax

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

Q&A

解決済

2回答

2469閲覧

twigでjavascriptのajaxを使いたい

yuhei_seguchi

総合スコア13

PHP

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

JavaScript

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

Twig

Twig は、簡潔で可読性の高いテンプレートを記述することができ、 シンプルに記述することを目的として作られた PHPテンプレートエンジンです。

Ajax

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

0グッド

0クリップ

投稿2019/07/23 06:17

編集2019/07/24 14:06

前提・実現したいこと

就職活動で提出するポートフォリオ製作のため、PHP(ViewはTwig)で簡単な画像投稿サイトを作っています。
投稿した画像を作品ごとに検索出来たら便利だなぁと思い、セレクトボックスで選択した作品を値としてajaxでプログラムファイル(PHP)に飛ばし、POSTで受け取るようにしたいです。

発生している問題・エラーメッセージ

発生している問題というか疑問なのですが、
・ajaxでプログラムファイルに飛ばした(ここまでは確認できた)あと、どのようにしたらプログラムファイルが出した値を最初のtwigで利用できるのか
というものです。

該当のソースコード

twig

1//セレクトボックスを選択(Twig) 2<input type="hidden" name="entry_url" value="{{constant('prototype\Bootstrap::ENTRY_URL')}}" id="entry_url" > 3<div id="selectImage"> 4 <select name="selectedImage" id="selectedImage"> 5 <option>-作品を選択できます-</option> 6 <option value="ほしのこえ">ほしのこえ</option> 7 <option value="雲のむこう、約束の場所">雲のむこう、約束の場所</option> 8 <option value="秒速5センチメートル">秒速5センチメートル</option> 9 <option value="星を追う子ども">星を追う子ども</option> 10 <option value="言の葉の庭">言の葉の庭</option> 11 <option value="君の名は。">君の名は。</option> 12 <option value="天気の子">天気の子</option> 13 </select> 14</div> 15<div id="ajax"> 16 <p>{{ajax}}</p> 17</div> 18//下でセレクトボックスで受け取った作品名の画像を表示 19<div id="display"> 20 <table> 21 <tr> 22 <th>&nbsp;</th> 23 <th>作品名</th> 24 <th>ユーザー名</th> 25 <th>画像</th> 26 </tr> 27 {% if selectedArr | length > 0 %} 28 {% for value in selectedArr %} 29 <tr> 30 <td>&nbsp;</td> 31 <td>{{item_name}}</td> 32 <td>{{user_name}}</td> 33 <td><img src="{{constant('prototype\Bootstrap::ENTRY_URL')}}{{image}}" alt="{{item_name}}" width="193" height="130"/></td> 34 {% endfor %} 35 </tr>

javascript

1//セレクトボックスのバリュー値を受け入れてajax.phpに飛ばす(ajax) 2$(function(){ 3  var entry_url = $("#entry_url").val(); 4 $('#selectedImage').on('change', function () { 5 var selectedImage = $('#selectedImage').val(); 6 $("#ajax").text("データの取得中です"); 7 $.ajax({ 8 type: 'GET', 9 url: entry_url + "ajax.php?selectedImage=",//entry_urlはローカルのurl 10 data: selectedImage 11 }).done(function(){ 12 $("#ajax").text("complete"); 13 }); 14 }); 15});

php

1//ajax.php 2require_once dirname(__FILE__) . '/Bootstrap.class.php'; 3 4use prototype\Bootstrap; 5 6$db=new PDODatabase(Bootstrap::DB_HOST, Bootstrap::DB_USER,Bootstrap::DB_PASS,Bootstrap::DB_NAME,Bootstrap::DB_TYPE); 7 8//選択された作品を取得 9if(isset($_GET['selectedImage']) === true){ 10 $selectedImage = (isset($_GET['selectedImage']) === true) ? $_GET['selectedImage'] : ''; 11 $table = " image "; 12 $column = " item_name, image, regist_date, user_name "; 13 $where = ' item_name = ? '; 14 $arrVal = [$selectedImage]; 15 $res = $this->db->select($table, $column, $where, $arrVal); 16} 17echo $res;

最終的に出てきた$resを最初のtwigに渡して、非同期的に表示させたいのですがやり方がわからないのです。
どのようにすればよいのかわからず困っています。
もしくは不可能なのでしょうか、、

ちなみに、javascriptは動いているのは確認できました。
どなたか、ご教授お願いします。m(-_-)m

追記

javascript

1$(function(){ 2 $('#selectedImage').on('change', function () { 3 var selectedImage = $('#selectedImage').val(); 4 $("#ajax").text("データの取得中です"); 5 $.ajax({ 6 type: 'GET', 7 url: entry_url + 'ajax.php?selectedImage=' + selectedImage, 8 dataType:'JSON', 9 data: selectedImage 10 }).done(function(data){ 11 console.log(data); 12 }); 13 }); 14});

php

1<?php 2namespace prototype; 3 4require_once dirname(__FILE__) . '/Bootstrap.class.php'; 5 6use prototype\Bootstrap; 7use prototype\lib\PDODatabase; 8use prototype\lib\Session; 9use prototype\lib\Item; 10use prototype\lib\Method; 11 12$db=new PDODatabase(Bootstrap::DB_HOST, Bootstrap::DB_USER,Bootstrap::DB_PASS,Bootstrap::DB_NAME,Bootstrap::DB_TYPE); 13$ses=new Session($db); 14$itm=new Item($db); 15$meth=new Method($db); 16 17echo 1;

追記2

javascript

1$(function(){ 2 $('#selectedImage').on('change', function () { 3 var selectedImage = $('#selectedImage').val(); 4 $("#ajax").text("データの取得中です"); 5 $.ajax({ 6 type: 'GET', 7 url: entry_url + "ajax.php?selectedImage=",//entry_urlはローカルのurl 8 data: selectedImage 9 }).done(function(data){ 10 console.log(data); 11 }); 12 }); 13});

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

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

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

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

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

guest

回答2

0

ベストアンサー

Twigとは関係ないところでつまずいていると思います。

Ajaxの基本としては非同期でリクエストを渡してそのレスポンスを受け取ることです。
今のところ「リクエストを渡してそのレスポンスを受け取る」はできていると思います。

仮に下記のようにしてみてください。

js

1 }).done(function(data){ 2 console.log(data); 3 });

php

1<?php 2echo 1;

するとAjax実行結果がブラウザ開発ツールのコンソールに「1」と出ると思います。

つまり、PHP側で出力された情報がそのまま返ってくるわけです。
ただし「出力」なのでPHP側が出力できる内容は通常HTMLを出力する場合と同じく「文字列」です。

ただ、単に文字列だとデータを受け取った場合に処理がしづらいです。
そういう時に使われるのが「JSON」です。

Ajax実行するところも少し変えます。

js

1 $.ajax({ 2 type: 'GET', 3 url: entry_url + "ajax.php?selectedImage=", 4 dataType: 'JSON', 5 data: selectedImage 6 }).done(function(data){ 7 console.log(data); 8 });

※オプションについては右記を確認→jQuery.ajax()

$this->db->select()がどのような情報を返しているのか分かりませんが、
DB取得結果の配列としたらそのまま下記のようにします。

php

1echo json_encode($res);

ここでブラウザ開発ツールのコンソールを確認するとおそらく取得しようとしていたデータが配列で表示されると思います。

あとはJavaScriptの操作によってその配列を好きなように加工するだけです。

コードを見た感じでしかないですが、検索処理結果を一覧にしようとしてるんでしょうか?
でしたらJavaScriptで一度tableで作っているリストをクリアし、JavaScriptでリストを作って埋め込みましょう。

投稿2019/07/23 06:30

編集2019/07/23 06:46
m.ts10806

総合スコア80765

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

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

yuhei_seguchi

2019/07/24 07:19

ありがとうございます! 現在上記の内容で書き直しているのですが、javascritの.done(function()以下が出力されません。これは、ajaxが何らかのエラーで動いていないということでしょうか? echo 1;とプログラムファイルに書き込んでも、1が出力されません。。
m.ts10806

2019/07/24 07:22

どのようにコードを書いたのでしょうか。 質問本文に追記してください
yuhei_seguchi

2019/07/24 07:56

追記しました。 コンソールには名前のないエラーが2つ出ています。
m.ts10806

2019/07/24 08:03

1つ1つ段階を追っていくものなのでphp側はecho 1だけにしたほうが良いのと dataTypeはデフォルトのままで良いと思います。
yuhei_seguchi

2019/07/24 14:07

ありがとうございます。。 上手く動いたので、ここから自分の力で頑張ります。 ありがとうございました!
m.ts10806

2019/07/24 14:21

理解につながったようで何よりです
guest

0

もしくは不可能なのでしょうか、、

はい、TwigはPHPで実行されて、JavaScriptの実行時にはすでに動作完了しているので、「JavaScriptで取ってきた結果をTwigに投げ込む」ようなことは不可能です。

代替案としては、

  • Ajaxで呼ばれるPHPでTwigを利用してHTML断片を生成して、それをJavaScript側に返して、JavaScriptでは出来上がったHTMLだけを埋め込むようにする
  • Twigではなく、JavaScriptサイドでHTMLを構築する

といった方法が考えられます。

投稿2019/07/23 06:20

maisumakun

総合スコア145121

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

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

m.ts10806

2019/07/23 06:35

>Twigを利用してHTML断片を生成 あ、なるほど。リスト部分だけ切り出せば共有できますね。
yuhei_seguchi

2019/07/24 07:24

ありがとうございます! >はい、TwigはPHPで実行されて、JavaScriptの実行時にはすでに動作完了しているので、「JavaScriptで取ってきた結果をTwigに投げ込む」ようなことは不可能です。 勉強になりました。。 >Ajaxで呼ばれるPHPでTwigを利用してHTML断片を生成して、それをJavaScript側に返して、JavaScriptでは出来上がったHTMLだけを埋め込むようにする こんな方法があったんですね。。ありがとうございます。 javascriptで返す際のデータタイプはJSONになりますか?それともHTMLですかね? 理解がおぼろげなので、教えていただけると嬉しいです。
yuhei_seguchi

2019/07/24 07:26

追記、ajaxで送る際のデータタイプのことです。 dataType: 'JSON'か dataType: 'HTML'か どちらになりますでしょうか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問