Mysql
 sql >> Base de Dados >  >> RDS >> Mysql

Recuperar dados no menu suspenso ajax usando PHP MySql JQuery


Poucos pensam sobre o seu código

  • Com AJAX, tente usar JSON para enviar e recuperar dados, isso lhe dará mais liberdade sobre vars e UI.

  • Como você está usando jQuery, tente usá-lo o máximo possível, não definindo eventos online, se você agrupar no script será mais fácil para você gerenciá-lo.

  • Sobre o select, é bem complicado recarregá-los. No IE eu lembro que não consegui adicionar opções, então, você tem que carregar o select INTEIRO.

  • Não use funções mysql_query do PHP, são bastante obsoletas. Leia e aplique isto: Como posso evitar a injeção de SQL em PHP?

  • Ao carregar valores do AJAX, você precisa anexar o manipulador aos elementos DOM, por isso usando a função .on(), para garantir que ele anexe o manipulador aos elementos.

  • Tente usar as bibliotecas mais recentes do jQuery, pois elas são mais rápidas, poderosas e têm desempenho aumentado, 1.4 é bem antigo...

Eu escrevi para você um exemplo de lista suspensa de países usando as coisas acima, para dar uma pista de como alcançá-lo, pegue o que você acha que gosta:

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>

estado.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
);

Eu adicionei para dar uma pista sobre como alcançá-lo, é um exemplo independente e você verá as alterações da caixa de depósito. Você terá que adicionar a lógica do PHP, mas eu queria mostrar uma abordagem melhor, XD