So implementieren Sie den sekundären Verknüpfungseffekt mithilfe des Ajax von jquery

Dieser Artikel stellt Ihnen hauptsächlich den Ajax von design_jquery zur Benutzerverwaltung vor, um den Verknüpfungseffekt der zweiten Ebene zu erzielen. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Seiteneffekt

Implementierungsschritte

1. Einführung des Struts-Plug-In-Pakets, das JSON integriert

2. Der Ajax der Seitenverwendung ruft die Verknüpfung js der zweiten Ebene auf.

//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 Definieren Sie die Methode findJctUnit() in der Action-Klasse. Hier wird die zurückgegebene List-Sammlung oben auf dem Stapel platziert und struts2 konvertiert es in JSON-Daten

/** 
  * @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";
  }

Unter anderem ist findSystemDDLListByKeyword(jctID) eine im Datenwörterbuchdienst implementierte Methode. Sie fragt hauptsächlich das Datenwörterbuch basierend auf dem Datentypnamen ab und gibt das Listensammlungsobjekt zurück

ValueUtils ist eine Werkzeugklasse, pushValueStack Die Methode verschiebt die Liste an die Spitze des Struts2-Wertestapels

public class ValueUtils {

  public static void pushValueStack(Object object) {
    ServletActionContext.getContext().getValueStack().push(object);
  }
}

Das Struts2-Plug-In-Paket verschiebt alle Attribute der Objekte im Listen Sie die Sammlung des Struts2-Wertestapels in json auf

4. Definieren Sie

in struts.xml (1) Ändern Sie den erweiterten Wert

Vor der Änderung

<!-- 系统管理 -->
<package name="system" extends="struts-default" namespace="/system">

Nach der Änderung

<!-- 系统管理 -->
  <package name="system" extends="json-default" namespace="/system">

( 2) Zuordnung hinzufügen

<!-- 如果是List集合，转换成json数组；如果是object对象，转换成json对象 -->
<result name="findJctUnit" type="json"></result>

Nach Abschluss der obigen Schritte können Sie den Wert des Dropdown-Felds der Einheit auswählen, zu der Sie gehören. und in der Dropdown-Option „Einheitsname“ wird ein entsprechender Wert angezeigt.

Sehen Sie sich die JSON-Daten auf der Browserseite wie folgt an:

Wenn Sie ein bestimmtes Attribut jsonisieren möchten, können Sie die Datei struts.xml unter ändern Diesmal:

<!-- 如果是List集合，转换成json数组；如果是object对象，转换成json对象 -->
      <result name="findJctUnit" type="json">
        <param name="includeProperties">\[\d+\]\.ddlCode,\[\d+\]\.ddlName</param>
 </result>

Hier verwenden wir reguläre Ausdrücke, um einen oder mehrere ddlCode und ddlName abzufangen, sodass die JSON-Daten nur ddlCode und ddlName enthalten.

Verwandte Empfehlungen:

JQ-Sekundärverknüpfung auf der Registrierungsseite erreichen

So erzielen Sie den ausgewählten Sekundärverknüpfungseffekt

Zusammenfassung der Verwendung des sekundären Verknüpfungsmenüs

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den sekundären Verknüpfungseffekt mithilfe des Ajax von jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!