ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryのajaxを使った二次連携効果の実装方法

jqueryのajaxを使った二次連携効果の実装方法

小云云オリジナル: 2018-01-01 10:43:073211ブラウズ

この記事では主に、第 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を使った二次連携効果の実装方法

関連記事