前提・実現したいこと
就職活動で提出するポートフォリオ製作のため、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> </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> </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});
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/24 07:19
2019/07/24 07:22
2019/07/24 07:56
2019/07/24 08:03
2019/07/24 14:07
2019/07/24 14:21