Mysql
 sql >> Baza danych >  >> RDS >> Mysql

Pobierz dane do rozwijanego menu ajax za pomocą PHP MySql JQuery

Niewiele myśli o Twoim kodzie

  • Dzięki AJAX spróbuj użyć JSON do wysyłania i pobierania danych, co da ci większą swobodę w zakresie zmiennych i interfejsu użytkownika.

  • Ponieważ używasz jQuery, staraj się używać go jak najwięcej, nie definiując zdarzeń online, jeśli zgrupujesz je w skrypcie, będzie Ci łatwiej nimi zarządzać.

  • Jeśli chodzi o wybór, przeładowanie ich jest dość trudne. W IE pamiętam, że nie mogłem dodać opcji, więc musisz załadować CAŁY wybór.

  • Nie używaj funkcji mysql_query PHP, są one dość przestarzałe. Przeczytaj i zastosuj to: Jak mogę zapobiec wstrzykiwaniu SQL w PHP?

  • Podczas ładowania wartości z AJAX, musisz dołączyć uchwyt do elementów DOM, dlatego używamy funkcji .on(), aby upewnić się, że dołącza uchwyt do elementów.

  • Spróbuj użyć nowszych bibliotek jQuery, ponieważ są one szybsze, mocniejsze i mają zwiększoną wydajność, 1.4 jest dość stare...

Napisałem Ci przykład listy krajów z wykorzystaniem powyższych rzeczy, aby dać Ci wskazówkę, jak to osiągnąć, weź to, co myślisz, że ci się podoba:

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>

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

Dodałem, aby dać ci wskazówkę, jak to osiągnąć, jest to samodzielny przykład, a zobaczysz zmiany w skrzynce. Będziesz musiał dodać logikę PHP, ale chciałem pokazać Ci lepsze podejście, XD



  1. Database
  2.   
  3. Mysql
  4.   
  5. Oracle
  6.   
  7. Sqlserver
  8.   
  9. PostgreSQL
  10.   
  11. Access
  12.   
  13. SQLite
  14.   
  15. MariaDB
  1. R- Znaki specjalne nie są wstawiane w mysql

  2. automatycznie aktualizuje pole mysql na podstawie wartości innego pola

  3. Jak znaleźć poprzedni rekord [n-na-grupę max(sygnatura czasowa) <sygnatura czasowa]?

  4. Powolny import dużego zrzutu MySQL

  5. Czy są jakieś dobre implementacje CachedRowSet inne niż zastrzeżona Sun?