Ajaxによる3段構えの連動効果を実現
2022-01-18 01:47:27
この例では、参考までに3段リンク効果を実現するためのAjaxの具体的なコードを以下のように共有します。
I. データテーブルとgson.jarをインポートする
この表には、中国のすべての省、市、県、区が含まれており、それらは parentid によって互いに関連している。
画像
次に、バックエンドのコード
各レベルのデータは前のレベルのidクエリに基づいているので、ロジックは非常に似ており、3つ以上のレベルのリンクを完了するために1つのインタフェースが必要なだけです。この場合、コアクエリは select * from area where parentid=#{pid} です。
エンティティ
package com.codeXie.entity;
import java.io;
public class Area implements Serializable {
private String areaid;
private String areaname;
private String parentid;
private Integer arealevel;
private Integer status;
public Area() {
}
public Area(String areaid, String areaname, String parentid, Integer arealevel, Integer status) {
this.areaid = areaid;
this.areaname = areaname;
this.parentid = parentid;
this.arealevel = arealevel;
this.status = status;
}
....... Omits set, get for each property
}
マッパー
public interface AreaMapper {
@Select("select * from area where parentid=#{pid}")
List<Area> selectMore(Integer pid);
}
サービス
{{コード
サーブレット
public interface AreaService {
List<Area> findCity(int pid);
}
III. フロントエンドのコード
@WebServlet("/AreaServlet")
public class AreaServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
String pid = req.getParameter("pid");
AreaServiceImpl service = new AreaServiceImpl();
List<Area> areas = service.findCity(Integer.parseInt(pid));
String json = new Gson().toJson(areas);
resp.getWriter().print(json);
}
}
以上がこの記事の全内容です。皆様の学習のお役に立ち、BinaryDevelopをもっと応援していただけると幸いです。
関連
-
AJAXを使ったファイルのアップロード
-
Ajax関数をラップする方法
-
ajax post download flaskのファイルストリームと中国語のファイル名の問題
-
バックエンドのAjaxから動的にデータを取得するbootstrap select2コード
-
AJAXによるページ更新効果の指定部分の実現
-
ajaxを使ったSpring Bootベースの画像アップロード
-
Spring MVC + ajax によるメッセージの検証
-
Ajaxによるxml情報受信・処理動作の解析例
-
XMLHttpRequestオブジェクトを使わずにAjaxの効果を実現する方法まとめ
-
Ajax非同期リフレッシュ機能と簡単なケース
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン