Mysql
 sql >> Teknologi Basis Data >  >> RDS >> Mysql

Ambil data ke menu tarik-turun ajax menggunakan PHP MySql JQuery

Sedikit yang memikirkan kode Anda

  • Dengan AJAX, coba gunakan JSON untuk mengirim dan mengambil data, ini akan memberi Anda lebih banyak kebebasan tentang vars dan UI.

  • Saat Anda menggunakan jQuery, cobalah untuk menggunakannya sebanyak mungkin, jangan mendefinisikan acara online, jika Anda mengelompokkannya dalam skrip akan lebih mudah bagi Anda untuk mengelolanya.

  • Soal pilih, cukup ribet reload mereka. Di IE, saya ingat saya tidak dapat menambahkan opsi, jadi, Anda harus memuat pilihan SELURUH.

  • Jangan gunakan fungsi PHP mysql_query, sudah tidak digunakan lagi. Baca dan terapkan ini: Bagaimana cara mencegah injeksi SQL di PHP?

  • Saat memuat nilai dari AJAX, Anda harus melampirkan handler ke elemen DOM, itulah mengapa menggunakan fungsi .on(), untuk memastikan itu melampirkan handler ke elemen.

  • Coba gunakan perpustakaan jQuery yang lebih baru, karena lebih cepat, kuat, dan kinerjanya meningkat, 1.4 sudah cukup lama...

Saya telah menulis kepada Anda contoh dropdown negara yang menggunakan hal-hal di atas, untuk memberi Anda petunjuk tentang cara mencapainya, ambil apa yang Anda pikir Anda suka:

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

Saya telah menambahkan untuk memberi Anda petunjuk tentang cara mencapainya, ini adalah contoh yang berdiri sendiri, dan Anda akan melihat perubahan pada dropbox. Anda harus menambahkan logika PHP, tetapi saya ingin menunjukkan pendekatan yang lebih baik, 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. Cara Mengatur Database MySQL WordPress di Cloud

  2. Masalah dalam PHP saat menggabungkan tabel yang memiliki kolom dengan nama yang sama

  3. tidak dapat menjatuhkan kunci asing di mySQL

  4. Ulangi pemicu dengan nilai yang dipisahkan koma mysql

  5. Bagaimana cara menampilkan gambar dari database di CodeIgniter?