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

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

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

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

JavaScript

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

jQuery

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

Q&A

解決済

4回答

3963閲覧

PHPとJavaScript間の連携について

kumataso

総合スコア12

PHP

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

JavaScript

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

jQuery

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

0グッド

1クリップ

投稿2016/08/25 03:16

編集2016/08/25 04:10

###前提・実現したいこと
PHPを使って業務画面を作成しています。
プルダウンから選択した内容でデータの絞り込みを行い、
絞り込まれた候補をセレクトボックスに一覧表示したいです。

###発生している問題・エラーメッセージ
セレクトボックスへ値が表示されない。

###実行コード

JavaScript

1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 2<script type="text/javascript"> 3 $(function(){ 4 $('#area').change(function(){ 5 var area_val = $('select[name="area"]').val(); 6 $.ajax({ 7 url: "hoge.php", 8 type: "POST", 9 dataType: 'json', 10 data: { 11 area_cd: area_val 12 }, 13 success:function(data){ 14 alert(data); 15 }, 16 error:function(XMLHttpRequest, textStatus, errorThrown) { 17 18 } 19 }); 20 }); 21 }); 22</script>

PHP

1<tr> 2 <td bgcolor="#f9f9f9"><strong>担当者</strong></td> 3 <td><select name="search_tanto[]" id="search_tanto" multiple="multiple" style="width: 150px;height:150px"> 4 <?php 5 for($i=0; $i < count($rep_info)-1; $i++) { 6 echo "<option value='$rep_cd[$i]'>$rep_name[$i]</option>"; 7 }; 8 ?> 9 </td> 10</tr> 11 12※rep_info,rep_cd[],rep_nameにはそれぞれプルダウンから取得した値でテーブルから取得した値です。 13※画面の初期表示時でも上記は描画されます。 14

###確認したこと
プルダウンの選択値を変更した際、POSTを実行していること(chromeのF12で確認)
submitを行った際に格納されているプルダウンの選択値に紐づいた欲しい情報は取得できている。
(=DBアクセス部分は問題がなさそうです)

###その他
JavaScriptからPOSTされた内容をどの様にすれば動的にリストボックスにあてこめるのでしょうか。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2016/08/25 03:20

差し支えない範囲でいいから、ソースを示して欲しいです。とくにjavascript付近は省略なく。
kei344

2016/08/25 03:22

ご自身で書かれたコードを質問文に追記いただいたほうが回答を得られやすいと思います。
kumataso

2016/08/25 03:38

閲覧およびコメントありがとうございます。 大変申し訳ありませんでした。すぐに情報を追記いたします。
guest

回答4

0

データを受け取った段階(successの中身です)で

Javascript

1// 戻ってきたjsonにtantoというプロパティがあり、それが配列を含んでいるとします。 2// 配列の要素は{"rep_cd":コード,"rep_name":名前}のようなオブジェクトであるとします。 3// まあ、よくあるDBからの戻りですね。 4$("#search_tanto").children().remove(); 5for (var i = 0; i < data.tanto.length; i++) { 6 var rep_cd = data.tanto[i].rep_cd; 7 var rep_name = data.tanto[i].rep_name; 8 $("#search_tanto").append('<option value="' + rep_cd + '">' + rep_name + '</option>'); 9} 10```みたいな感じ?実証コードを書いてないので、動くか分かりませんが、考えはこんな感じだと思います。

投稿2016/08/25 04:44

編集2016/08/25 05:00
shi_ue

総合スコア4437

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

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

kumataso

2016/08/25 05:03

shi_ueさん ご回答ありがとうございます。 JavaScriptからoptionタグを追加していくのは正直頭にありませんでした。 いただいたサンプルコードで処理フローのイメージが湧いてきましたので、着手してみようと思います。 取り急ぎお礼まで。
kumataso

2016/08/25 08:22 編集

shi_ueさん 先程はサンプルコードをありがとうございました。 サンプルへご記載いただいた、戻ってきたjson...のコメントの所で既に躓いてしまっており、POSTしたレスポンスをjsonへperseできていない状態です。 「Unexpected token < in JSON at position 0」とメッセージが出力され、 dataの中を確認してみるとhtmlのソースコードが詰まっていました。 恐らくはじめのDOCTYPE宣言またはHTMLの開始タグの時点でエラーとなっている様です。 恐縮ですが、原因や対応方法等をご存じでしたら教えていただけないでしょうか。
shi_ue

2016/08/25 08:31 編集

hoge.phpでエラーが出てますよ、きっと。 console.log(data)ってやると、エラーメッセージがでてるんじゃないですかね?
shi_ue

2016/08/25 08:34

あ、それと、hoge.php側でjsonを作って返す時に、 header('content-type: application/json; charset=utf-8'); とヘッダーを指定してくださいね。
kumataso

2016/08/25 08:59

shi_ueさん 返信ありがとうございます。 hoge.php の方は特にエラーメッセージが見受けられない様です。 画面上にもエラーメッセージが出ていなく、WEBサーバのerror.logにも特に記載がありませんでした。 console.log(data)はJavaScript側での話でしょうか。 そうと仮定して実行結果をご報告させていただくと、 console.log(data)を実行するとHTMLのソースコードが表示されます。 今更ですが、ajax関数の戻り値をPHP側で作成、送信していなかったことが原因な気がしてきました(現在対応中です) hoge.phpの中で明示的に返却を行っていなかったため、phpの実行結果(=最終的なhtml)が引き渡された?と予想しております。
shi_ue

2016/08/25 09:03

javascript側はjsonを期待しているので、当然htmlじゃだめです。 hoge.phpはjsonを出力するように作ってくださいね。
kumataso

2016/08/25 09:33 編集

shi_ueさん 度々ありがとうございます。 >hoge.phpはjsonを出力するように作ってくださいね。 hoge.phpのファイルにHTML、phpコードを混在する形で作りこんでしまっており、ヘッダは既にhtmlで宣言済みでした。 別途phpファイルを作成し、呼び出す形で解決を目指すことにしようかと思います。
guest

0

html

1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>サンプルコード</title> 6 </head> 7 <body> 8 <select name="pref" id="pref"> 9 <option value="" selected="selected">---- 都道府県選択 ----</option> 10 <option value="01">北海道</option> 11 <option value="02">青森県</option> 12 <option value="03">岩手県</option> 13 <option value="04">宮城県</option> 14 <option value="05">秋田県</option> 15 <option value="06">山形県</option> 16 <option value="07">福島県</option> 17 <option value="08">茨城県</option> 18 <option value="09">栃木県</option> 19 <option value="10">群馬県</option> 20 <option value="11">埼玉県</option> 21 <option value="12">千葉県</option> 22 <option value="13">東京都</option> 23 ... 24 <option value="47">沖縄県</option> 25 </select> 26 <select name="city" id="city"> 27 28 </select> 29 </body> 30 <script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.min.js"></script> 31 <script> 32 $(function () { 33 $('#pref').on('change', function () { 34 if ('' === $(this).val()) { 35 return; 36 } 37 var pref = $(this).val(); 38 $.post({ 39 url: 'ajax.php' 40 , type: "POST" 41 , dataType: 'json' 42 , data: { 43 pref: pref 44 } 45 , success: function (json) { 46 var city = $('#city'); 47 city.empty(); 48 $.each(json, function (k, v) { 49 var opt = $('<option>'); 50 opt.val(k); 51 opt.text(v); 52 city.append(opt); 53 }); 54 } 55 }); 56 }); 57 }); 58 </script> 59</html>

ajax.php

php

1<?php 2 3ini_set('display_errors', 1); 4error_reporting(E_ALL); 5 6$cities = array( 7 '01' => array( 8 '01101' => '札幌市中央区' 9 , '01102' => '札幌市北区' 10 , '01103' => '札幌市東区' 11 ) 12); 13 14$pref = filter_input(INPUT_POST, 'pref'); 15 16header('Content-type: application/json'); 17$json = (isset($cities[$pref])) ? $cities[$pref] : null; 18echo json_encode($json);

イメージ説明

投稿2016/08/25 09:04

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

kumataso

2016/08/25 09:49 編集

Kosuke_Shibuyaさん コメントありがとうございます。 サンプルまでご作成いただき、お手数お掛けして申し訳ありません。 手本としながら作業を進めさせていただきます。
guest

0

見た感じ、areaというセレクトボックスが別途あって変更すると
hoge.phpからdataを返してもらってsearch_tanto[]のセレクトボックスを
書き換える・・・という仕様でしょうか?

現在テストで受け取ったデータをalertしようとしているけど表示されないのですか?
よくあるのは戻り値がparseerrorを起こしていたりするので
errorの戻り値をconsole.logで確認してください

javascript

1error:function(XMLHttpRequest, textStatus, errorThrown) { 2console.log(textstatus); 3}

投稿2016/08/25 04:32

yambejp

総合スコア114572

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

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

kumataso

2016/08/25 04:56

yambejpさん ご回答ありがとうございます。 仕様については仰る通りの内容です。 >現在テストで受け取ったデータをalertしようとしているけど表示されないのですか? POST自体はレスポンスが200番でしたのでOK、内容がおかしいかなとテストをしていました。 いただいたサンプルコードを元に動作させたところ、まさにparseerrorを起こしていました。原因調査の方針がたち、本当に助かりました。ありがとうございます。
kumataso

2016/08/25 08:13

yambejpさん parseerrorの原因ですが、レスポンスをType指定しているjsonへ変換する中で起きているようでした。 試しにType指定を'html' またはType指定そのものをしないことで発生しなくなりました。
guest

0

自己解決

既存ソースコードを大分書き換える必要があること、工期の関係からjqueryを利用した実装を一旦諦めることにしました。
形としてはフォームに絞り込みボタンを配置し、submitしていただきPOSTから値を取得する形で実装を行いました。

質問のご対応、コメント、サンプル作成等色々とフォローいただいたのに申し訳ありません。
この悔しい経験をバネに勉強して参りたいと思いますので、今後ともよろしくお願いいたします。

投稿2016/08/26 02:24

kumataso

総合スコア12

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問