Ajax veriyi başka bir sayfada tutup diğer sayfadan çağırma nasıl yapılır?

Kolay gelsin herkese. Php ile bir emlak sitesi yapıyorum. İl, ilçe, mahalle gibi bilgileri veri tabanına eklerken ve güncellerken sayfanın açılma süresi çok uzun olduğu için, -en az 10 saniye sürüyor- bu il, ilçe ve mahalle verisini farklı bir sayfada tutup, veri ekleme sayfasına çağırmak istiyorum. İl, ilçe, mahalle verisi yüz yirmi bin satır tutuyor. Aşağıdaki, örnek koddur. Yardım edebilir misiniz?

<script>
const sehirler = [
  {
    "sehir_id": "1",
    "sehir_adi": "ADANA"
  },
  {
    "sehir_id": "2",
    "sehir_adi": "ADIYAMAN"
  },
  {
    "sehir_id": "3",
    "sehir_adi": "AFYONKARAHİSAR"
  }]
</script>
<script>
const ilceler = [{
    "ilce_id": "1104",
    "ilce_adi": "SEYHAN",
    "sehir_id": "1",
    "sehir_adi": "ADANA"
  },
  {
    "ilce_id": "1219",
    "ilce_adi": "CEYHAN",
    "sehir_id": "1",
    "sehir_adi": "ADANA"
  },
  {
    "ilce_id": "1329",
    "ilce_adi": "FEKE",
    "sehir_id": "1",
    "sehir_adi": "ADANA"
  }];
  const mahalleler = [
  {
  "mahalle_id":"72",
  "mahalle_adi":"2000 EVLER MAHALLESİ",
  "ilce_id":"1104",
  "ilce_adi":"SEYHAN",
  "sehir_id":"1",
  "sehir_adi":"ADANA"},
  
  {
  "mahalle_id":"1",
  "mahalle_adi":"AHMET REMZİ YÜREĞİR MAHALLESİ",
  "ilce_id":"1104",
  "ilce_adi":"SEYHAN",
  "sehir_id":"1",
  "sehir_adi":"ADANA"},
  
  {
  "mahalle_id":"2",
  "mahalle_adi":"AKKAPI MAHALLESİ",
  "ilce_id":"1104",
  "ilce_adi":"SEYHAN",
  "sehir_id":"1",
  "sehir_adi":"ADANA"}];
// İl dropdown değiştiğinde ilgili ilçeleri yükle
function ilDegisti() {
    const ilId = document.getElementById("il").value;
    const ilceDropdown = document.getElementById("ilce");
    ilceDropdown.innerHTML = '<option value=""><?php echo $dil["a18"]; ?></option>'; // İlçeleri sıfırla
    const mahalleDropdown = document.getElementById("mahalle");
    mahalleDropdown.innerHTML = '<option value=""><?php echo $dil["a18"]; ?></option>'; // Mahalleleri sıfırla
    // Seçilen il ile ilgili ilçeleri filtrele
    const ilgiliIlceler = ilceler.filter(ilce => ilce.sehir_adi === ilId);
    // İlçeleri dropdown'a ekle
    ilgiliIlceler.forEach(ilce => {
        const option = document.createElement("option");
        option.value = ilce.ilce_adi;
        option.text = ilce.ilce_adi;
        ilceDropdown.appendChild(option);
    });
}
// İlçe dropdown değiştiğinde ilgili mahalleleri yükle
function ilceDegisti() {
    const ilceId = document.getElementById("ilce").value;
    const mahalleDropdown = document.getElementById("mahalle");
    mahalleDropdown.innerHTML = '<option value=""><?php echo $dil["a18"]; ?></option>'; // Mahalleleri sıfırla
    // Seçilen ilçe ile ilgili mahalleleri filtrele
    const ilgiliMahalleler = mahalleler.filter(mahalle => mahalle.ilce_adi === ilceId);
    // Mahalleleri dropdown'a ekle
    ilgiliMahalleler.forEach(mahalle => {
        const option = document.createElement("option");
        option.value = mahalle.mahalle_adi;
        option.text = mahalle.mahalle_adi;
        mahalleDropdown.appendChild(option);
    });
}
// Sayfa yüklendiğinde illeri dropdown'a ekle
window.onload = function() {
    const ilDropdown = document.getElementById("il");
    sehirler.forEach(sehir => {
        const option = document.createElement("option");
        option.value = sehir.sehir_adi;
        option.text = sehir.sehir_adi;
        ilDropdown.appendChild(option);
    });
};
</script>

Veritabanı ile ilgili bir işlem yapmıyorsanız js tarafını domcontentloaded ile sayfa yüklendikten sonra çalışacak şekilde ayarlayabilirsiniz, sayfa açılır sonra js kodlarınız çalışır.

Verilerinizi JSON dosyasında saklayıp ajax kullanarak asenkron olarak yükleyebilirsiniz.

    <select id="il" onchange="ilDegisti()">
        <option value="">İl Seçiniz</option>
    </select>
    <select id="ilce" onchange="ilceDegisti()">
        <option value="">İlçe Seçiniz</option>
    </select>
    <select id="mahalle">
        <option value="">Mahalle Seçiniz</option>
    </select>

    <script>
    let tumVeriler = null;

    async function verileriYukle() {
        try {
            const response = await fetch('veriler.json');
            tumVeriler = await response.json();
            illerDoldur();
        } catch (error) {
            console.error('Veri yükleme hatası:', error);
        }
    }

    function illerDoldur() {
        const ilDropdown = document.getElementById("il");
        tumVeriler.sehirler.forEach(sehir => {
            const option = document.createElement("option");
            option.value = sehir.sehir_id;
            option.textContent = sehir.sehir_adi;
            ilDropdown.appendChild(option);
        });
    }

    function ilDegisti() {
        const ilId = document.getElementById("il").value;
        const ilceDropdown = document.getElementById("ilce");
        const mahalleDropdown = document.getElementById("mahalle");
        
        ilceDropdown.innerHTML = '<option value="">İlçe Seçiniz</option>';
        mahalleDropdown.innerHTML = '<option value="">Mahalle Seçiniz</option>';
        
        const ilgiliIlceler = tumVeriler.ilceler.filter(ilce => ilce.sehir_id === ilId);
        ilgiliIlceler.forEach(ilce => {
            const option = document.createElement("option");
            option.value = ilce.ilce_id;
            option.textContent = ilce.ilce_adi;
            ilceDropdown.appendChild(option);
        });
    }

    function ilceDegisti() {
        const ilceId = document.getElementById("ilce").value;
        const mahalleDropdown = document.getElementById("mahalle");
        
        mahalleDropdown.innerHTML = '<option value="">Mahalle Seçiniz</option>';
        
        const ilgiliMahalleler = tumVeriler.mahalleler.filter(mahalle => mahalle.ilce_id === ilceId);
        ilgiliMahalleler.forEach(mahalle => {
            const option = document.createElement("option");
            option.value = mahalle.mahalle_id;
            option.textContent = mahalle.mahalle_adi;
            mahalleDropdown.appendChild(option);
        });
    }

    window.onload = verileriYukle;
    </script>

veriler.json dosyası oluşturun ve şu şekilde kullanın:

{
  "sehirler": [
    {"sehir_id": "1", "sehir_adi": "ADANA"},
    {"sehir_id": "2", "sehir_adi": "ADIYAMAN"}
  ],
  "ilceler": [
    {"ilce_id": "1", "ilce_adi": "SEYHAN", "sehir_id": "1"},
    {"ilce_id": "2", "ilce_adi": "CEYHAN", "sehir_id": "1"}
  ],
  "mahalleler": [
    {"mahalle_id": "1", "mahalle_adi": "2000 EVLER MAHALLESİ", "ilce_id": "1"},
    {"mahalle_id": "2", "mahalle_adi": "AHMET REMZİ YÜREĞİR MAHALLESİ", "ilce_id": "1"}
  ]
}

Kolay gelsin.