Bagaimana untuk menggunakan ajax dalam php untuk mencapai hubungan wilayah

Dalam pembangunan web, hubungan wilayah adalah salah satu fungsi yang sangat biasa. Contohnya, dalam borang pengisian alamat, pengguna perlu memilih wilayah mereka dahulu, dan kemudian membuat pilihan berdasarkan data bandar wilayah yang dipilih. Realisasi fungsi ini bergantung terutamanya pada kerjasama antara teknologi hadapan dan teknologi belakang. Dalam artikel ini, kami akan memperkenalkan cara menggunakan teknologi PHP dan AJAX untuk melaksanakan fungsi hubungan wilayah.

1. Kerja penyediaan

Sebelum menggunakan PHP dan AJAX untuk mencapai hubungan wilayah, kami perlu menyediakan beberapa kerja yang diperlukan. Pertama, kita memerlukan pangkalan data bandar. Pangkalan data ini mengandungi data untuk semua wilayah, bandar dan daerah. Pangkalan data ini boleh menjadi MySQL, Oracle, MSSQL Server, dll. Dalam artikel ini, kami menggunakan pangkalan data MySQL.

Selain itu, kami juga memerlukan beberapa teknologi bahagian hadapan, seperti HTML, CSS dan Javascript. Teknologi ini boleh membantu kami membina antara muka pengguna yang sangat interaktif. Dalam antara muka pengguna ini, pengguna boleh memilih wilayah dan bandar mereka melalui menu lungsur.

2. Membina pangkalan data bandar

Sebelum mencipta pangkalan data bandar, kita perlu mereka bentuk struktur data pangkalan data ini. Ia terutamanya mengandungi jadual data berikut:

• Jadual wilayah (wilayah): Mengandungi medan id wilayah dan nama wilayah; medan id wilayah;
• Jadual daerah (kawasan): termasuk medan id daerah, nama daerah dan id bandar.
• Gunakan pernyataan SQL berikut untuk mencipta jadual:

--Jadual provinsi

BUAT JADUAL

(
province int(11) BUKAN NULL AUTO_INNCREMENT,
id varchar(50) BUKAN NULL,
KUNCI UTAMA (name)
) ENJIN=CHARSET LALAI InnoDB=utf8;id
-- Meja bandar (

int(11) BUKAN NULL AUTO_INCREMENT,city
varchar(50) BUKAN NULL,id
int(11) BUKAN NULL,name KEY (
),province_id KEY
(id)
) ENGINE=CARSET LAALA InnoDB=utf8;province_idprovince_id-- Jadual daerah
BUAT JADUAL

(

int(11) BUKAN NULL AUTO_INCREMENT,area
varchar(50) BUKAN NULL,id
int(11) BUKAN NULL,name KUNCI UTAMA (
) , city_id KEY
(id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;city_idcity_idSelepas mengimport data bandar ke dalam tiga jadual ini, kita boleh mula membina kod PHP.

Bina kod pautan wilayah

3. Berikut ialah proses pelaksanaan kod PHP:

Apabila pengguna memilih wilayah (melalui kaedah menu lungsur), kod AJAX menghantar id wilayah yang dipilih ke pelayan bahagian belakang

Selepas pelayan bahagian belakang menerima id wilayah, ia menanyakan pangkalan data dan mengembalikan senarai bandar kepada; wilayah mana milik
• kod AJAX Kemas kini senarai bandar ke halaman hujung hadapan supaya pengguna boleh terus memilih bandar.
• Mengikuti proses di atas, kita boleh menulis kod PHP berikut:

province.php

city . php

<?php
// 获取所有省份信息
$conn = mysqli_connect("localhost", "root", "password", "test");
$sql = "SELECT id, name FROM province ORDER BY id ASC";
$result = mysqli_query($conn, $sql);
$provinceArray = array();
while ($row = mysqli_fetch_assoc($result)) {
    array_push($provinceArray, $row);
}
mysqli_close($conn);

// 输出省份信息
echo json_encode($provinceArray, JSON_UNESCAPED_UNICODE);
?>

area.php

<?php
// 获取所选省份对应的城市信息
$provinceId = $_GET[&#39;provinceId&#39;];
$conn = mysqli_connect("localhost", "root", "password", "test");
$sql = "SELECT id, name FROM city WHERE province_id=$provinceId ORDER BY id ASC";
$result = mysqli_query($conn, $sql);
$cityArray = array();
while ($row = mysqli_fetch_assoc($result)) {
    array_push($cityArray, $row);
}
mysqli_close($conn);

// 输出城市信息
echo json_encode($cityArray, JSON_UNESCAPED_UNICODE);
?>

• Di sini kami menggunakan mysqli untuk menyambung ke pangkalan data, anda perlu menukar ". localhost" dalam kod di atas , "root" dan "kata laluan" digantikan dengan nama hos, nama pengguna dan kata laluan yang sepadan. Pada masa yang sama, kita juga perlu menguji nama pangkalan data ke dalam pangkalan data yang sepadan.

<?php
// 获取所选城市对应的县区信息
$cityId = $_GET[&#39;cityId&#39;];
$conn = mysqli_connect("localhost", "root", "password", "test");
$sql = "SELECT id, name FROM area WHERE city_id=$cityId ORDER BY id ASC";
$result = mysqli_query($conn, $sql);
$areaArray = array();
while ($row = mysqli_fetch_assoc($result)) {
    array_push($areaArray, $row);
}
mysqli_close($conn);

// 输出县区信息
echo json_encode($areaArray, JSON_UNESCAPED_UNICODE);
?>

Membina antara muka bahagian hadapan

4. Dalam membina antara muka bahagian hadapan, terutamanya kita perlu menggunakan teknologi HTML, CSS dan Javascript. Berikut ialah langkah utama untuk melaksanakan hubungan wilayah di bahagian hadapan:

Tentukan dua menu lungsur: satu untuk memilih wilayah dan satu lagi untuk memilih bandar

Apabila pengguna memilih Selepas wilayah, hantar permintaan kepada pelayan bahagian belakang untuk mendapatkan senarai bandar yang sepadan dengan wilayah
• Kemas kini senarai lungsur bandar supaya pengguna boleh terus memilih bandar.
• Berikut ialah kod HTML dan Javascript yang dilaksanakan:

Selepas halaman dijalankan, pengguna boleh memilih wilayah dan bandar mereka melalui senarai juntai bawah. Apabila pengguna memilih wilayah, permintaan AJAX dihantar secara automatik untuk mendapatkan senarai bandar apabila pengguna memilih bandar, permintaan AJAX dihantar secara automatik untuk mendapatkan senarai daerah. Semuanya selesai tanpa sebarang lompatan halaman, dan pengalaman pengguna sangat baik.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>省级联动</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <select id="provinceSelect">
        <option value="">请选择省份</option>
    </select>
    <select id="citySelect">
        <option value="">请选择城市</option>
    </select>
    <select id="areaSelect">
        <option value="">请选择县区</option>
    </select>
    <script>
        $(document).ready(function () {
            // 页面加载时获取所有省份信息
            $.ajax({
                url: 'province.php',
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    // 循环添加省份列表
                    $.each(data, function (i, item) {
                        $('#provinceSelect').append('<option value="&#39; + item.id + &#39;">' + item.name + '</option>');
                    });
                }
            });

            // 当用户选择省份时获取该省份对应的城市信息
            $('#provinceSelect').change(function () {
                // 获取所选省份的id
                var provinceId = $(this).val();

                // 清空城市列表和县区列表
                $('#citySelect').empty().append('<option value="">请选择城市</option>');
                $('#areaSelect').empty().append('<option value="">请选择县区</option>');

                // 如果没有选择省份，则不处理
                if (provinceId === '') {
                    return false;
                }

                // 发送AJAX请求获取所选省份对应的城市列表
                $.ajax({
                    url: 'city.php',
                    type: 'GET',
                    dataType: 'json',
                    data: { provinceId: provinceId },
                    success: function (data) {
                        // 循环添加城市列表
                        $.each(data, function (i, item) {
                            $('#citySelect').append('<option value="&#39; + item.id + &#39;">' + item.name + '</option>');
                        });
                    }
                });
            });

            // 当用户选择城市时获取该城市对应的县区信息
            $('#citySelect').change(function () {
                // 获取所选城市的id
                var cityId = $(this).val();

                // 清空县区列表
                $('#areaSelect').empty().append('<option value="">请选择县区</option>');

                // 如果没有选择城市，则不处理
                if (cityId === '') {
                    return false;
                }

                // 发送AJAX请求获取所选城市对应的县区列表
                $.ajax({
                    url: 'area.php',
                    type: 'GET',
                    dataType: 'json',
                    data: { cityId: cityId },
                    success: function (data) {
                        // 循环添加县区列表
                        $.each(data, function (i, item) {
                            $('#areaSelect').append('<option value="&#39; + item.id + &#39;">' + item.name + '</option>');
                        });
                    }
                });
            });
        });
    </script>
</body>
</html>

Setakat ini, kami telah berjaya melaksanakan fungsi hubungan peringkat wilayah antara PHP dan AJAX. Pada masa yang sama, kami juga merasakan kerjasama erat antara teknologi hadapan dan belakang untuk membawa pengguna pengalaman yang lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan ajax dalam php untuk mencapai hubungan wilayah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!