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

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

ただいまの
回答率

90.36%

  • PHP

    25497questions

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

  • JavaScript

    22103questions

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

  • jQuery

    8764questions

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

PHPとJavaScript間の連携について

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,868

kumataso

score 10

前提・実現したいこと

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

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

セレクトボックスへ値が表示されない。

実行コード

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){ 
        $('#area').change(function(){
            var area_val = $('select[name="area"]').val();
            $.ajax({
                url: "hoge.php",
                type: "POST",
                dataType: 'json',
                data: {
                area_cd: area_val
            },
                success:function(data){
                alert(data);
                },
                error:function(XMLHttpRequest, textStatus, errorThrown) {

                }
            });
        });
    });
</script>
<tr>
    <td  bgcolor="#f9f9f9"><strong>担当者</strong></td>
        <td><select name="search_tanto[]" id="search_tanto" multiple="multiple" style="width: 150px;height:150px">
            <?php                                                 
            for($i=0; $i < count($rep_info)-1; $i++) {
                 echo "<option value='$rep_cd[$i]'>$rep_name[$i]</option>";
            };
            ?>
    </td>
</tr>

※rep_info,rep_cd[],rep_nameにはそれぞれプルダウンから取得した値でテーブルから取得した値です。
※画面の初期表示時でも上記は描画されます。

確認したこと

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

その他

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

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • 退会済みユーザー

    2016/08/25 12:18

    こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

  • m6u

    2016/08/25 12:20

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

    キャンセル

  • kei344

    2016/08/25 12:22

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

    キャンセル

  • kumataso

    2016/08/25 12:38

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

    キャンセル

回答 4

+2

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

// 戻ってきたjsonにtantoというプロパティがあり、それが配列を含んでいるとします。
// 配列の要素は{"rep_cd":コード,"rep_name":名前}のようなオブジェクトであるとします。
// まあ、よくあるDBからの戻りですね。 
$("#search_tanto").children().remove();
for (var i = 0; i < data.tanto.length; i++) {
  var rep_cd   = data.tanto[i].rep_cd;
  var rep_name = data.tanto[i].rep_name;
  $("#search_tanto").append('<option value="' + rep_cd + '">' + rep_name + '</option>');
}

みたいな感じ?実証コードを書いてないので、動くか分かりませんが、考えはこんな感じだと思います。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/08/25 17:59

    shi_ueさん

    返信ありがとうございます。

    hoge.php の方は特にエラーメッセージが見受けられない様です。
    画面上にもエラーメッセージが出ていなく、WEBサーバのerror.logにも特に記載がありませんでした。
    console.log(data)はJavaScript側での話でしょうか。
    そうと仮定して実行結果をご報告させていただくと、
    console.log(data)を実行するとHTMLのソースコードが表示されます。

    今更ですが、ajax関数の戻り値をPHP側で作成、送信していなかったことが原因な気がしてきました(現在対応中です)
    hoge.phpの中で明示的に返却を行っていなかったため、phpの実行結果(=最終的なhtml)が引き渡された?と予想しております。

    キャンセル

  • 2016/08/25 18:03

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

    キャンセル

  • 2016/08/25 18:32 編集

    shi_ueさん

    度々ありがとうございます。

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

    キャンセル

+1

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

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/08/25 13:56

    yambejpさん

    ご回答ありがとうございます。
    仕様については仰る通りの内容です。

    >現在テストで受け取ったデータをalertしようとしているけど表示されないのですか?
    POST自体はレスポンスが200番でしたのでOK、内容がおかしいかなとテストをしていました。

    いただいたサンプルコードを元に動作させたところ、まさにparseerrorを起こしていました。原因調査の方針がたち、本当に助かりました。ありがとうございます。

    キャンセル

  • 2016/08/25 17:13

    yambejpさん

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

    キャンセル

+1

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>サンプルコード</title>
    </head>
    <body>
        <select name="pref" id="pref">
            <option value="" selected="selected">---- 都道府県選択 ----</option>
            <option value="01">北海道</option>
            <option value="02">青森県</option>
            <option value="03">岩手県</option>
            <option value="04">宮城県</option>
            <option value="05">秋田県</option>
            <option value="06">山形県</option>
            <option value="07">福島県</option>
            <option value="08">茨城県</option>
            <option value="09">栃木県</option>
            <option value="10">群馬県</option>
            <option value="11">埼玉県</option>
            <option value="12">千葉県</option>
            <option value="13">東京都</option>
            ...
            <option value="47">沖縄県</option>
        </select>
        <select name="city" id="city">

        </select>
    </body>
    <script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.min.js"></script>
    <script>
        $(function () {
            $('#pref').on('change', function () {
                if ('' === $(this).val()) {
                    return;
                }
                var pref = $(this).val();
                $.post({
                    url: 'ajax.php'
                    , type: "POST"
                    , dataType: 'json'
                    , data: {
                        pref: pref
                    }
                    , success: function (json) {
                        var city = $('#city');
                        city.empty();
                        $.each(json, function (k, v) {
                            var opt = $('<option>');
                            opt.val(k);
                            opt.text(v);
                            city.append(opt);
                        });
                    }
                });
            });
        });
    </script>
</html>

ajax.php

<?php

ini_set('display_errors', 1);
error_reporting(E_ALL);

$cities = array(
    '01' => array(
        '01101' => '札幌市中央区'
        , '01102' => '札幌市北区'
        , '01103' => '札幌市東区'
    )
);

$pref = filter_input(INPUT_POST, 'pref');

header('Content-type: application/json');
$json = (isset($cities[$pref])) ? $cities[$pref] : null;
echo json_encode($json);

イメージ説明

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/08/25 18:48 編集

    Kosuke_Shibuyaさん

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

    キャンセル

check解決した方法

0

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

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

  • PHP

    25497questions

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

  • JavaScript

    22103questions

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

  • jQuery

    8764questions

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