JSP で Ajax と JavaScript を使用してカスケード効果を実現する方法

Web アプリケーションの急速な発展に伴い、フロントエンド テクノロジの重要性がますます高まっています。この記事では、JSP で Ajax と JavaScript を使用してカスケード効果を実現する方法について詳しく説明します。

1. カスケードとは何ですか?

カスケードとは、1 つのドロップダウン リストでオプションを選択すると、別のドロップダウン リストのオプションもそれに応じて変更されることを意味します。たとえば、[省] ドロップダウン リストで北京を選択すると、[都市] ドロップダウン リストのオプションが自動的に北京が属する都市に変わります。

2. JSP での Ajax と JavaScript

JSP では、Ajax と JavaScript を使用してインターフェイスと対話できます。このうちAjaxとは、Asynchronous JavaScript and XML（非同期JavaScriptとXML）の略称です。 JavaScript および XML テクノロジを使用して、ページ全体を再ロードせずにページの一部を更新します。 JavaScript はブラウザ上で実行できるスクリプト言語です。 HTML ページを操作し、Web ページ上で動的な効果を実現できます。

3. カスケードを実現するにはどうすればよいですか?

1. フロントエンド部分

フロントエンドでは、2 つのドロップダウン リストのコードを定義する必要があります。たとえば、「県」と「市」のドロップダウン リストを定義します。

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

ここでは、JavaScript で操作できるように、id 属性を使用してドロップダウン リストに名前を付けます。

2. バックエンド部分

バックグラウンドでは、都市リストを取得するためのインターフェイスを定義する必要があります。たとえば、Spring MVC フレームワークを使用してこの関数を実装できます。

@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;
    }

}

ここでは、CityController クラスを定義し、その getCityList メソッドで都市リストを取得して返します。都市情報を表す内部クラス City も定義していることに注意してください。

3. JavaScript パート

JavaScript では、次のような一連の操作を実行する必要があります。

• 「」の選択を聞く「都道府県」ドロップダウン リスト イベント
• Ajax リクエストをバックグラウンドに送信して都市リストを取得します
• 都市リストに基づいて「都市」ドロップダウン リストの内容を動的に更新します

たとえば、jQuery ライブラリを使用してこの関数を実装できます。

$(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();
    }
  });
});

この JavaScript コードでは、ページが読み込まれた後に実行される Ready メソッドを定義します。次に、「地方」ドロップダウン リストの選択イベントをリッスンし、その値を取得しました。値が 0 より大きい場合は、ユーザーが有効な州を選択したことを意味し、$.get メソッドを使用して Ajax リクエストをバックグラウンドに送信し、対応する都市のリストを取得します。都市リストの取得に成功した後、「都市」ドロップダウン リストの内容を動的に更新しました。それ以外の場合、ユーザーが「選択してください」を選択すると、「都市」ドロップダウン リストがクリアされます。

4. 概要

この記事では、JSP で Ajax と JavaScript を使用してカスケード効果を実現する方法について詳しく説明します。フロントエンドでドロップダウン リストを定義し、バックエンドでインターフェイスを定義し、JavaScript イベントと Ajax メソッドを呼び出すことにより、カスケード効果を簡単に実現し、ユーザー エクスペリエンスを向上させ、Web アプリケーションをより便利で効率的にすることができます。

以上がJSP で Ajax と JavaScript を使用してカスケード効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。