Cara menggunakan Ajax dan JavaScript dalam JSP untuk mencapai kesan melata

Dengan perkembangan pesat aplikasi web, teknologi bahagian hadapan menjadi semakin penting. Dalam artikel ini, kami akan mendalami cara menggunakan Ajax dan JavaScript dalam JSP untuk mencapai kesan melata.

1. Apakah lata?

Cascading bermaksud bahawa selepas memilih pilihan dalam satu senarai juntai bawah, pilihan dalam senarai juntai bawah yang lain juga akan berubah dengan sewajarnya. Sebagai contoh, jika anda memilih Beijing dalam senarai juntai bawah "Wilayah", pilihan dalam senarai juntai bawah "Bandar" akan bertukar secara automatik kepada bandar yang menjadi milik Beijing.

2. Ajax dan JavaScript dalam JSP

Dalam JSP, kami boleh menggunakan Ajax dan JavaScript untuk berinteraksi dengan antara muka. Antaranya, Ajax ialah singkatan daripada Asynchronous JavaScript dan XML (asynchronous JavaScript dan XML). Ia menggunakan teknologi JavaScript dan XML untuk mengemas kini sebahagian halaman tanpa memuatkan semula keseluruhan halaman. JavaScript ialah bahasa skrip yang boleh dijalankan dalam penyemak imbas. Ia boleh mengendalikan halaman HTML dan mencapai kesan dinamik pada halaman web.

3. Bagaimana untuk melaksanakan cascading?

1. Bahagian bahagian hadapan

Di bahagian hadapan, kita perlu mentakrifkan kod untuk dua senarai juntai bawah. Sebagai contoh, kami mentakrifkan senarai lungsur turun "Wilayah" dan "Bandar":

<label for="province">省份</label>
<select id="province">
  <option value="0">请选择</option>
  <option value="1">北京市</option>
  <option value="2">上海市</option>
  <option value="3">广东省</option>
</select>

<label for="city">城市</label>
<select id="city">
  <option value="0">请选择</option>
</select>

Di sini kami menggunakan atribut id untuk menamakan senarai lungsur turun supaya ia boleh dimanipulasi dalam JavaScript.

2. Bahagian belakang

Di bahagian belakang, kita perlu menentukan antara muka untuk mendapatkan senarai bandar. Sebagai contoh, kita boleh menggunakan rangka kerja Spring MVC untuk melaksanakan fungsi ini:

@RestController
@RequestMapping("/city")
public class CityController {

    @GetMapping("/{provinceId}")
    public List<City> getCityList(@PathVariable int provinceId) {
        List<City> cityList = null;
        // 查询城市列表的代码
        return cityList;
    }

    @Data
    public static class City {
        private int id;
        private String name;
    }

}

Di sini kami mentakrifkan kelas CityController dan mendapatkan senarai bandar dalam kaedah getCityListnya dan mengembalikannya. Harap maklum bahawa kami juga mentakrifkan Bandar kelas dalaman untuk mewakili maklumat bandar.

3. Bahagian JavaScript

Dalam JavaScript, kita perlu melakukan satu siri operasi, termasuk:

• Dengar pemilihan " Acara senarai lungsur Province"
• Hantar permintaan Ajax ke latar belakang untuk mendapatkan senarai bandar
• Kemas kini kandungan senarai juntai bawah "Bandar" secara dinamik berdasarkan senarai bandar

Sebagai contoh, kami boleh menggunakan Perpustakaan jQuery untuk melaksanakan fungsi ini:

$(document).ready(function () {
  $("#province").change(function () {
    var provinceId = $(this).val();
    if (provinceId > 0) {
      $.get("/city/" + provinceId, function (data) {
        var citySelect = $("#city");
        citySelect.empty().append('<option value="0">请选择</option>');
        $.each(data, function (index, city) {
          citySelect.append('<option value="&#39; + city.id + &#39;">' + city.name + '</option>');
        });
      });
    } else {
      $("#city").empty();
    }
  });
});

Dalam kod JavaScript ini, kami mentakrifkan kaedah sedia untuk dilaksanakan selepas halaman dimuatkan. Kemudian, kami mendengar acara pemilihan senarai juntai bawah "Wilayah" dan memperoleh nilainya. Jika nilai lebih besar daripada 0, ini bermakna pengguna telah memilih wilayah yang sah dan kami menggunakan kaedah $.get untuk menghantar permintaan Ajax ke latar belakang untuk mendapatkan senarai bandar yang sepadan. Selepas berjaya mendapatkan senarai bandar, kami mengemas kini kandungan senarai lungsur "Bandar" secara dinamik. Jika tidak, jika pengguna memilih "Sila pilih", kami mengosongkan senarai juntai bawah "Bandar".

4. Ringkasan

Artikel ini meneroka secara mendalam kaedah menggunakan Ajax dan JavaScript dalam JSP untuk mencapai kesan melata. Dengan mentakrifkan senarai juntai bawah di bahagian hadapan, mentakrifkan antara muka di bahagian belakang, dan menggunakan acara JavaScript dan kaedah Ajax, kami boleh mencapai kesan melata dengan mudah, meningkatkan pengalaman pengguna dan menjadikan aplikasi web lebih mudah dan cekap.

Atas ialah kandungan terperinci Cara menggunakan Ajax dan JavaScript dalam JSP untuk mencapai kesan melata. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!