Mysql
 sql >> Base de données >  >> RDS >> Mysql

Récupérer des données dans le menu déroulant ajax à l'aide de PHP MySql JQuery

Peu de réflexions sur votre code

  • Avec AJAX, essayez d'utiliser JSON pour envoyer et récupérer des données, cela vous donnera plus de liberté sur les variables et l'interface utilisateur.

  • Comme vous utilisez jQuery, essayez de l'utiliser autant que possible, sans définir d'événements en ligne, si vous les regroupez dans le script, il vous sera plus facile de le gérer.

  • A propos de la sélection, il est assez délicat de les recharger. Dans IE, je me souviens que je ne pouvais pas ajouter d'options, vous devez donc charger TOUTE la sélection.

  • N'utilisez pas les fonctions PHP mysql_query, elles sont assez obsolètes. Lisez et appliquez ceci : Comment puis-je empêcher l'injection SQL dans PHP ?

  • Lors du chargement de valeurs à partir d'AJAX, vous devez attacher le gestionnaire aux éléments DOM, c'est pourquoi utiliser la fonction .on(), pour vous assurer qu'il attache bien le gestionnaire aux éléments.

  • Essayez d'utiliser les nouvelles bibliothèques de jQuery, car elles sont plus rapides, puissantes et ont des performances accrues, la 1.4 est assez ancienne...

Je vous ai écrit un exemple de liste déroulante de pays utilisant les éléments ci-dessus, pour vous donner une idée de la façon d'y parvenir, prenez ce que vous pensez que vous aimez :

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>

état.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
);

J'ai ajouté pour vous donner un indice sur la façon d'y parvenir, c'est un exemple autonome, et vous verrez les changements de la boîte de dépôt. Vous devrez ajouter la logique PHP, mais je voulais vous montrer une meilleure approche, XD