sql >> データベース >  >> RDS >> Mysql

PHPMySqlJQueryを使用してajaxドロップダウンメニューにデータを取得する

    あなたのコードについて考える人はほとんどいません

    • AJAXを使用して、JSONを使用してデータを送受信してみてください。これにより、変数とUIについてより自由になります。

    • jQueryを使用しているので、オンラインイベントを定義するのではなく、可能な限り使用するようにしてください。スクリプトでグループ化すると、管理が容易になります。

    • 選択については、それらをリロードするのはかなりトリッキーです。 IEでは、オプションを追加できなかったので、全体選択をロードする必要があることを覚えています。

    • PHPのmysql_query関数は使用しないでください。かなり非推奨です。これを読んで適用します: PHPでSQLインジェクションを防ぐにはどうすればよいですか?

    • AJAXから値をロードするときは、ハンドラーをDOM要素にアタッチする必要があります。そのため、.on()関数を使用して、ハンドラーが要素にアタッチされていることを確認してください。

    • jQueryの新しいライブラリを使用してみてください。これらのライブラリはより高速で強力であり、パフォーマンスが向上しています。1.4はかなり古いです...

    上記のものを使用している国のドロップダウンの例を書きました。それを達成する方法の手がかりを与えるために、あなたがそれを好きだと思うものを取ります:

    index.html:

    <html>
    
        <head>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
        </head>
    
        <body>
    
        <script>
        $(document).ready(function () {
            $(document).on('change', '#div_country select, #div_state select', function () {
                var $type = $(this).attr('data-type');
                var $id = $(this).val();
    
                if ( $id != -1 ) {
                    loadSelect( $type, $id );
                }
    
            });
    
            function loadSelect( $type, $id ) {
                $.ajax({
                    type: 'post',
                    url: 'states.php',
                    cache: false,
                    data: {
                        'type': $type
                    ,   'id': $id
                    },
                    dataType: 'json',
                    success: function (data) {
                        if ( data.result == true ) {
                            if (data.html !== undefined) {
                                var $div = '';
                                if ( $type == 'country') {
                                    $div = 'state';
                                } else {
                                    $div = 'city';
                                }
                                $( "#div_" + $div ).html(data.html);
                            }
                        } else {
                            alert('Something went wrong!');
                        }
                    }
                });
            }
    
        });
        </script>
    
        <div id="div_country">
            <select data-type="country">
                <option value="-1">Select Country</option>
                <option value="1">Spain</option>
                <option value="2">France</option>
                <option value="3">Germany</option>
            </select>
        </div>
    
        <div id="div_state">
            <select data-type="state">
                <option value="-1">Select Country</option>
            </select>
        </div>
    
        <div id="div_city">
            <select>
                <option value="-1">Select State</option>
            </select>
        </div>
    
        </body>
    </html>
    

    state.php

    <?php
    $type = isset( $_POST['type'] ) ? $_POST['type'] : '';
    
    if ( !empty( $type ) ) {
        switch ($type) {
            case 'country':
                $result = true;
                $html = '<select data-type="state">
                            <option value="-1">Select State</option>
                            <option value="1">state 1</option>
                            <option value="2">state 2</option>
                        </select>';
            break;
            case 'state':
                $result = true;
                $html = '<select data-type="city">
                            <option value="-1">Select City</option>
                            <option value="1">city 1</option>
                            <option value="2">city 2</option>
                        </select>';
            break;
            default:
                $result = false;
                $html = '';
            break;
        }
    }
    
    $data = array(
        'result' => $result,
        'html' => $html
    );
    

    これを実現する方法についての手がかりを提供するために追加しました。これはスタンドアロンの例であり、ドロップボックスの変更が表示されます。 PHPロジックを追加する必要がありますが、より良いアプローチ、XDを紹介したいと思います



    1. 16進数のテキスト文字列をbyteaとしてPostgreSQLに挿入する

    2. Oracle jdbcドライバークラスの違いは?

    3. MySQLのdatetime列よりもタイムスタンプの方がどれくらい速いですか?

    4. CakePHP 3の複数の列で2つのテーブルを結合するにはどうすればよいですか?