以前に書いたように、このデモを完了したとき、私は今、誰もがAjaxを使用してジョイントメニューを完成させなくなったことがわかりました。実際、著者のデモはこれを完了するためではありません。著者の主な学習方向は、Javawebの背景のビジネスロジック開発です。ただし、バックグラウンドで作業する場合、フロントエンド、特にAjaxなどの非同期データ提出の技術を理解して習得する必要があることを理解する必要があります。そこで、私は連結されたメニューを使用してAjaxの非同期提出を練習し、その後、非同期提出フォームのいくつかのデモを書きます。
著者の背景は、Spring+SpringMVCフレームワークを使用しています。この部分はここでは説明されていません。焦点はjqueryとajaxにあります。
まず、リソースjquery.jsをダウンロードします
jQuery公式ウェブサイトリンク
第二に、ダウンロードしたjquery.jsをプロジェクトにインポートします
Javawebプロジェクトでは、WebContentに入れてください（独自のフォルダーを作成することもできますが、Web-INFファイルに入れないでください）
第三に、コードの書き込みを開始します
新しいJSPファイルを作成します
コードは次のとおりです
<％@page Import = "Java.util.map"％> <％@page Import = "java.util.list"％> <％@page Language = "java" contentType = "text/html; charset = utf-8" pageencoding = "utf-8"％> <トランジション// en "" http://www.w3.org/tr/html4/loose.dtd"> <html> <head>バックグラウンドからフロントエンドに渡されました。トピックajaxから分離することができ、あまり注意を払う必要はありません - > <％list <map <string、object >> listmap =（list <map <string、object >>）request.getattribute（ "list"）; ％> <選択id = "class" onchange = "getStudent（this.value）"> <option value = "-1"> class </option> <％for（int i = 0; i <listmap.size（）; i ++）{map <string、object> object> map = listmap.get（i）;％> <option> <％= <％= </</</</</< ％> <！ - 最初にクラスを選択し、次に2番目のメニューオプションは、選択したコンテンツに従ってバックグラウンドデータベースのデータを非同期に同期し、2番目のメニューのオプションを設定します - > </select> <！ - 選択したクラスに従って名前を決定 - > <> <select id = "name"> <オプション>クラスを選択してください。 type = "text/javascript" src = "jquery/jquery-3.1.1.min.js"> </script> <！ - jqueryでajaxを使用してインターフェイスの非同期同期を実行します - > <script> // jquery標準的な会長所function $（ "＃クラス"）他のドメインからリソースを呼び出す必要がある場合は、クロスドメインの問題URL： "ajax.html？classname ="+$（ "＃class"）。val（）、//バックグラウンドリターンの形式を設定し、通常はjsonを直接使用します。この文を見逃すことはできません。それ以外の場合、バックグラウンドがデータを返す場合、成功方法はdatatypeと呼ばれません： "json"、//バックグラウンドがデータを正常に返すとき、メソッドは呼び出されます。データパラメーターは、jQueryのAjaxによってフォーマットされたJSONデータを表します（実際、非jQuery Ajaxで手動でフォーマットする必要があります。また、コメントで純粋なJSメソッドを書きました。JSONデータをJSONデータのフォーマットは解析します） option $（ "＃name"）。append（ "<option> name </option>"）; //データ全体（jsonデータ）をループし、option $ .each（data、function（i、n）{$（ "＃name"）。 <オプション> "+data [i] .name+" </option> "）;}）;}）;}）;}このメソッドを呼び出すために選択コントロールにオンチングすると、選択された値がこのclassName変数関数getStudent（className！= "-1"）{// xmlhttprequestメソッドを自動的に保存します。オープンメソッド。最後の真のことは、非同期提出を使用することを意味します。これは省略できます。デフォルト値はtruerequest.open（ "post"、 "ajax.html？classname ="+classname、true）;次のステップは、（request.readystate === 4）{// Webページの返されたコードがOKの場合は200の場合にのみ実行されることのみが実行されます。（request.status === 200）{//返されたjson data var data = json.parse（request.responseText）; i ++）{document.getElementById（ "name"）。remove（document.getElementById（ "name"）。options [i]）;} document.getElementById（ "name"）第四に、最終効果図
上記は、編集者があなたに紹介したJavawebの開発です。 JQueryとAjaxを使用して、動的リンケージメニュー効果を実現します。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！