sql >> Databáze >  >> RDS >> Mysql

Načtěte data do rozbalovací nabídky ajax pomocí PHP MySql JQuery

Málokdo přemýšlí o vašem kódu

  • S AJAX zkuste použít JSON k odesílání a načítání dat, dá vám to větší svobodu ohledně proměnných a uživatelského rozhraní.

  • Když používáte jQuery, snažte se jej používat co nejvíce, nedefinujte online události, pokud je seskupíte do skriptu, bude pro vás snazší to spravovat.

  • Pokud jde o výběr, je to docela složité znovu je načíst. V IE si pamatuji, že jsem nemohl přidat možnosti, takže musíte načíst výběr WHOLE.

  • Nepoužívejte PHP funkce mysql_query, jsou docela zastaralé. Přečtěte si a použijte toto: Jak mohu zabránit vkládání SQL v PHP?

  • Při načítání hodnot z AJAXu musíte připojit handler k prvkům DOM, proto použijte funkci .on(), abyste se ujistili, že připojí handler k prvkům.

  • Zkuste použít novější knihovny jQuery, protože jsou rychlejší, výkonnější a mají zvýšený výkon, 1.4 je dost stará...

Napsal jsem vám příklad rozbalovací nabídky zemí používajících výše uvedené věci, abyste měli představu, jak toho dosáhnout, vezměte si, co si myslíte, že se vám to líbí:

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

Přidal jsem, abych vám dal představu, jak toho dosáhnout, je to samostatný příklad a uvidíte změny dropboxu. Budete muset přidat logiku PHP, ale chtěl jsem vám ukázat lepší přístup, XD



  1. Jak zjistit, kolik mysql dotazů provedl php skript?

  2. Fronta úloh jako SQL tabulka s více spotřebiteli (PostgreSQL)

  3. Nelze připojit PostgreSQL ke vzdálené databázi pomocí pgAdmin

  4. pymssql.OperationalError:Chybová zpráva DB-Lib 20009, závažnost 9