Ajax jQueryはページ上のdivの更新効果を実現します

Ajax jQueryはページ上のdivの更新効果を実現します

元のコードは次のとおりです。

<div class='コントロールグループ'>
   <label class='control-label' for='inputSelect'>所属ユニット</label>
   <div class='コントロール'>
    <select id='inputSelect' name="acCpname" onchange="updateAc()">

    <c:forEach items="${list }" var="list">
     <option value="${list.cpname}">${list.cpname }</option>
    </c:forEach>
    </選択>
   </div>
   </div>
   <div class='コントロールグループ'>
   <label class='control-label'>必須スタンプ</label>
   <div class='controls' id="updateac" style="height: 40px">
    <c:if test="${空のシールテーブル}">
    <label class='radio inline'> 利用できるスタンプがありません。スタンプを申請してください</label>
    </c:if>
    <c:if test="${空でないシールテーブル}">
    <c:forEach items="${sealtables}" var="sealtable"
     varStatus="ステータス">
     <label class='ラジオインライン'> <input type='チェックボックス'
     名前 = "selectSealType" 値 = '${sealtable.sealtype}' />
     ${シールテーブル.シールタイプ}
     </ラベル>
    </c:forEach>
    </c:if>
   </div>
   </div>

エフェクトのスクリーンショット:

この効果を実現するには、画像の赤くマークされた部分のドロップダウン リストをクリックします。ドロップダウン リストの変更に応じて、下のチェック ボックスの値も変更されます。

まず、解決策について説明します。ドロップダウン リストに onchange イベントを追加し、それを ajax 経由で非同期的にコントローラーに送信し、データベース クエリを実行してから、ModelAndView に戻ります。ModelAndView によって設定されるビューは新しい jsp ページであり、jsp ページに埋め込まれたコードは変更される div コードです。

ドロップダウン リストに onchange イベントを追加します。

時間に対する Ajax 非同期更新イベントを追加します。

返された押されたサーフェスはdivに直接ロードされます

<スクリプト>
 関数 updateAc() {
 $.ajax({
  タイプ: "POST",
  url: '${pageContext.request.contextPath}/updateAc.action',
  データ : {
  会社: $('#inputSelect').val()
  },
  データ型: "html",
  キャッシュ: false、
  非同期: true、
  コンテンツタイプ: "application/x-www-form-urlencoded; 文字セット=utf-8",
  成功: 関数(データ) {
  $("#updateac").html(データ);
  },
  エラー: 関数() {
  }
 });
 }
</スクリプト>

updateAc.action に送信します:

ドロップダウンリストで選択された値に応じて、データベースから対応する情報が検索されて返され、comp.jspページがレンダリングされます。

@RequestMapping(値 = "/updateAc.action")
  パブリックModelAndView updateComp(HttpServletRequestリクエスト、モデルモデル){
   ModelAndView modelAndView = 新しい ModelAndView();
   文字列 companyname = request.getParameter("company");
   リスト<Sealtable> sealtables = service.sealTableBySealCpName(companyname);
   modelAndView.addObject("シールテーブル"、シールテーブル);
   modelAndView.setViewName("comp");
   modelAndView を返します。
  }

.jsp: をコンパイルします。

<%@ ページ language="java" contentType="text/html; charset=UTF-8"
 ページエンコーディング="UTF-8"%>
<%@ タグライブラリ uri="http://java.sun.com/jsp/jstl/core" プレフィックス="c"%>
<%@ タグライブラリ uri="http://java.sun.com/jsp/jstl/fmt" プレフィックス="fmt"%>

<%-- <%@ ファイル="model.jsp"%> を含めます --%>
<div class='controls' id="updateac" style="margin-left: -20px;margin-top: -15px">
 <c:if test="${空のシールテーブル}">
  <label class='radio inline'> 利用できるスタンプがありません。スタンプを申請してください</label>
 </c:if>
 <c:if test="${空でないシールテーブル}">
  <c:forEach items="${sealtables}" var="sealtable" varStatus="ステータス">
   <label class='ラジオインライン'> <input type='チェックボックス'
    名前 = "selectSealType" 値 = '${sealtable.sealtype}' />
    ${シールテーブル.シールタイプ}
   </ラベル>
  </c:forEach>
 </c:if>
</div>

これで、ページの部分的な更新を実装できます。

要約する

これで、ajax jquery を使用してページの div を更新する方法についてのこの記事は終了です。ajax jquery ページの div 更新の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • div の下の JSP コンテンツの Ajax 部分更新方法
  • jQuery のローカル div 更新とグローバル更新メソッドの概要
  • jQueryのページめくりコンポーネントyunm.pager.jsはdivの部分更新のアイデアを実現します

<<:  Linuxはデュアルネットワークカードボンドとドライバーインターフェースを使用する

>>:  MySQLのビューの詳細な説明

推薦する

JSベースの手持ち連射機能+テキスト揺れ特殊効果コードの簡単実装

少し前にTikTokで揺れる連打が流行っていたので真似してみることにしました。さっそく効果をみてみま...

RHEL8 で静的 IP アドレスを設定するさまざまな方法の簡単な分析

Linux サーバーで作業している場合、ネットワーク カード/イーサネット カードに静的 IP アド...

ウェブページのテーブルの境界線を設定する方法

<br />前回は、Web テーブルにセルの線を設定する方法を学びました。今日は、Web...

Win10 の組み込み Linux システムを使用して Spring Boot プロジェクトを開始する方法

1. Windows10の組み込みLinuxサブシステムをインストールする1.1. Linuxサブシ...

MySQLは外部SQLスクリプトファイルのコマンドを実行します

目次1. SQLコマンドを含むSQLスクリプトファイルを作成する2. SQLスクリプトファイルを実行...

vue-routerのマッチングに基づいてパンくずリスト機能を実現する

この記事では主にvue-routerのmatchedをベースにしたbreadcrumb機能を紹介し、...

Windows Server 2008 R2 に MySQL 5.7.10 をインストールする手順

MSIインストールパッケージを使用してインストールするご使用のオペレーティング システムに応じて、対...

MySQL ストアドプロシージャとストアドファンクションの詳細な説明

1 ストアドプロシージャ1.1 ストアドプロシージャとは何かストアド プロシージャは、特定の機能を実...

ホームページのデザインはウェブデザイナーのレベルを最もよく反映する

私がこれまで携わってきた多くのプロジェクトでは、基本的に避けられない悪循環がありました。それは、ホー...

HTML ウェブページでのアンカー(名前付きアンカー)の使用の概要

以下の情報はインターネットから収集したものです1. アンカーは、Web ページ作成におけるハイパーリ...

Dockerで最もよく使われるイメージコマンドとコンテナコマンドの詳細な説明

この記事では、Docker の使用で最もよく使用されるイメージ コマンドとコンテナ コマンドを一覧表...

WeChatアプレットはシンプルな手書き署名コンポーネントを実装します

目次背景:必要:効果1. アイデア2. 実装1. ページとスタイル2. 初期化3. クリックすると4...

nginx がどのようにして高いパフォーマンスとスケーラビリティを実現するのかを深く理解する

NGINX の全体的なアーキテクチャは、連携して動作する一連のプロセスによって特徴付けられます。メイ...

Zabbix で Windows のパフォーマンスを監視する方法

背景情報最近、Windows パフォーマンスに関する本を読み直しています。以前は SCOM 監視を使...

MySQL トリガー: 複数のトリガー操作の作成例の分析

この記事では、例を使用して、MySQL で複数のトリガー操作を作成する方法について説明します。ご参考...