ホームページ > 記事 > ウェブフロントエンド > jqueryのajaxを使った二次連携効果の実装方法
この記事では主に、第 2 レベルのリンケージ効果を実現するためのユーザー管理 design_jquery の ajax について説明します。編集者はこれが非常に良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
ページの効果
実装手順
1. json
を統合するためのstrutsプラグインパッケージを導入します。2. ページは、第2レベルのリンケージjs
//ajax的二级联动,使用选择的所属单位,查询该所属单位下对应的单位名称列表 function findJctUnit(o){ //货物所属单位的文本内容 var jct = $(o).find("option:selected").text(); $.post("elecUserAction_findJctUnit.do",{"jctID":jct},function(data,textStatus){ //先删除单位名称的下拉菜单,但是请选择要留下 $("#jctUnitID option").remove(); if(data!=null && data.length>0){ for(var i=0;i<data.length;i++){ var ddlCode = data[i].ddlCode; var ddlName = data[i].ddlName; //添加到单位名称的下拉菜单中 var $option = $("<option></option>"); $option.attr("value",ddlCode); $option.text(ddlName); $("#jctUnitID").append($option); } } }); }
を呼び出すために使用します。3. ActionクラスのMethod内で、ここでは返されたListコレクションをスタックの先頭に置き、struts2がjsonデータに変換します
/** * @Name: findJctUnit * @Description: 使用jquery的ajax完成二级联动,使用所属单位,关联单位名称 * @Parameters: 无 * @Return: 使用struts2的json插件包 */ public String findJctUnit(){ //1:获取所属单位下的数据项的值(从页面提交的jctID值,不是数据字典中的ddlcode) String jctID = elecUser.getJctID(); //2:使用该值作为数据类型,查询对应数据字典的值,返回List<ElecSystemDDL> List<ElecSystemDDL> list = elecSystemDDLService.findSystemDDLListByKeyword(jctID); //3:将List<ElecSystemDDL>转换成json的数组,将List集合放置到栈顶 ValueUtils.pushValueStack(list); return "findJctUnit"; }
このうち、findSystemDDLListByKeyword(jctID)は主にデータディクショナリサービスに実装されているメソッドです。データ型名に基づいてデータ ディクショナリを生成し、リスト コレクション オブジェクトを返します
ValueUtils はツール クラスです。pushValueStack メソッドはリストを struts2 値スタックの先頭にプッシュします
public class ValueUtils { public static void pushValueStack(Object object) { ServletActionContext.getContext().getValueStack().push(object); } }
struts2 プラグイン パッケージは、すべてのstruts2の値のリストコレクション内のオブジェクトの属性をjson
にスタックします。 4. struts.xmlに
を定義します。 (1) extends値を変更します
変更前
<!-- 系统管理 --> <package name="system" extends="struts-default" namespace="/system">
変更後
<!-- 系统管理 --> <package name="system" extends="json-default" namespace="/system">
(2) マッピングを追加します
<!-- 如果是List集合,转换成json数组;如果是object对象,转换成json对象 --> <result name="findJctUnit" type="json"></result>
上記の手順を完了すると、所属するユニットを選択できます。ドロップダウン ボックスの値は、ユニット名のドロップダウン オプションにも対応する値があります。
次のようにブラウザ ページで json データを表示します:
特定の属性を json 化したい場合は、この時点で struts.xml ファイルを変更できます:
<!-- 如果是List集合,转换成json数组;如果是object对象,转换成json对象 --> <result name="findJctUnit" type="json"> <param name="includeProperties">\[\d+\]\.ddlCode,\[\d+\]\.ddlName</param> </result>
ここでは、正規表現を使用してインターセプトします1 つ以上の ddlCode と ddlName。これにより、json データには ddlCode と ddlName のみが含まれます。
関連する推奨事項:
以上がjqueryのajaxを使った二次連携効果の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。