Detaillierte Erläuterung von Ajax-Anwendungsbeispielen für DOM-Objekte

Anforderung: Klicken Sie auf das Dropdown-Optionsfeld, wählen Sie einen Datentyp aus und zeigen Sie automatisch die Namen aller Datenelemente unter diesem Typ im Formular an, d. h. alle eindeutigen ddlNames, die demselben Schlüsselwort im entsprechen Datenbank.

1. Fügen Sie in dictionaryIndex.jsp hinzu:

<script type="text/javascript" src="${pageContext.request.contextPath }/script/pub.js?1.1.11"></script>

2. Code zum Aufrufen von js:

function changetype(){        
          if(document.Form1.keyword.value=="jerrynew"){            
             
               var textStr="<input type=\"text\" name=\"keywordname\" maxlength=\"50\" size=\"24\"> ";
             document.getElementById("newtypename").innerHTML="类型名称：";
             document.getElementById("newddlText").innerHTML=textStr;
             
             
             Pub.submitActionWithForm('Form2','${pageContext.request.contextPath }/system/elecSystemDDLAction_edit.do','Form1');
            
          }else{            var textStr="";
            document.getElementById("newtypename").innerHTML="";
            document.getElementById("newddlText").innerHTML=textStr;             /**
                * 参数一：传递dictionaryIndex.jsp的From2的表单
                * 参数二：传递URL路径地址
                * 参数三：传递dictionaryIndex.jsp的From1的表单
                
                原理：使用Ajax
                * 传递dictionaryIndex.jsp中表单Form1中的所有元素作为参数，传递给服务器，并在服务器进行处理
                * 将处理后的结果放置到dictionaryEdit.jsp中
                * 将dictionaryEdit.jsp页面的全部内容放置到dictionaryIndex.jsp表单Form2中*/Pub.submitActionWithForm('Form2','${pageContext.request.contextPath }/system/elecSystemDDLAction_edit.do','Form1');
          }  
       }

Code anzeigen

　Die Methode „submitActionWithForm“ ist in pub.js definiert.

3. Definieren Sie 5 Methoden in pub.js:

(1) Pub.submitActionWithForm-Methode

/***
 * domId：表单Form2的名称
 * action：表示URL连接
 * sForm：表单Form1的名称 */Pub.submitActionWithForm=function(domId,action,sForm){  /**第一步：创建Ajax引擎对象*/
  var req = Pub.newXMLHttpRequest();  /**第二步：req.onreadystatechange表示事件处理函数（相当于一个监听），用来监听客户端与服务器端的连接状态*/
  var handlerFunction = Pub.getReadyStateHandler(req, domId,Pub.handleResponse);
  req.onreadystatechange = handlerFunction;  /**第三步：打开一个连接，要求：如果是POST请求，需要设置一个头部信息，否则此时不能使用req.send()方法向服务器发送数据*/
  req.open("POST", action, true);
  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
  /**第四步：向服务器发送数据，格式：name=张三&age=28*/
  var str = Pub.getParams2Str(sForm); 
  //传递表单Form1中的元素作为参数给服务器  req.send(str);
}

(2) Die Pub.newXMLHttpRequest-Methode

/**
 * 用于创建ajax引擎 */Pub.newXMLHttpRequest=function newXMLHttpRequest() {  var xmlreq = false;  if (window.XMLHttpRequest) {xmlreq = new XMLHttpRequest();
  } else if (window.ActiveXObject) {     try {
      
      xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e1) {       
      try {
      
        xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e2) {
          
        alert(e2);
      }
    }
  }  return xmlreq;
}

　xmlreq = new XMLHttpRequest() ist das Kernobjekt der Ajax-Operation

(3) Pub.getParams2Str-Methode

/**
 * @Description:传递表单Form1中的元素作为参数
 * @param sForm：传递表单Form1的名称
 * @returns {String}：使用ajax返回服务器端的参数，传递的就是表单Form1中元素的参数 */Pub.getParams2Str=function getParams2Str(sForm){ var strDiv="";      
 try {var objForm=document.forms[sForm];  if (!objForm)return strDiv;  var elt,sName,sValue;  for (var fld = 0; fld < objForm.elements.length; fld++) {
      elt = objForm.elements[fld];    
      sName=elt.name;
      sValue=""+elt.value;      if(fld==objForm.elements.length-1)
          strDiv=strDiv + sName+"="+sValue+"";       else   
          strDiv=strDiv + sName+"="+sValue+"&";
   }


  }  catch (ex) {return strDiv;
    } 
   return strDiv;
}

(4) Pub.getReadyStateHandler-Methode

=  (req.readyState == 4   (req.status == 200"HTTP error: "+

　(5) Pub.handleResponse-Methode

/**
 * @Description:将结果返回dictionaryEdit.jsp，并放置到dictionaryIndex.jsp的Form2中
 * @param data：服务器返回的结果
 * @param eleid：表单Form2的名称 */Pub.handleResponse= function handleResponse(data,eleid){      //获取表单Form2的对象  var ele =document.getElementById(eleid);      //将返回的结果放置到表单Form2的元素中  ele.innerHTML = data;
    
}

　Der nächste Schritt besteht darin, die Action-Klasse zu betreiben, was die Abfrage des entsprechenden ddlName in der Datenbank basierend auf erfordert Stichwort. Operation:

　

4. Fügen Sie die Edit()-Methode in ElecSystemDDLAction hinzu

/**  
    * @Name: edit
    * @Description: 跳转到数据字典编辑页面
    * @Parameters: 无
    * @Return: String：跳转到system/dictionaryEdit.jsp*/public String edit(){//1.获取数据类型String keyword = elecSystemDDL.getKeyword();//2.使用数据类型查询数据字典，返回List<ElecSystemDDL>List<ElecSystemDDL> list=elecSystemDDLService.findSystemDDLListByKeyword(keyword);
        request.setAttribute("list", list);return "edit";
    }

5. Deklarieren Sie in IElecSystemDDLService

List<ElecSystemDDL> findSystemDDLListByKeyword(String keyword);

6. Überschreibende Methode in ElecSystemDDLServiceImpl

/**  
    * @Name: findSystemDDLListByKeyword
    * @Description: 根据数据类型名称查询数据字典
    * @Parameters: keyword:数据类型名称
    * @Return: List：存储ElecSystemDDL对象集合*/@Overridepublic List<ElecSystemDDL> findSystemDDLListByKeyword(String keyword) {//查询条件String condition="";//查询条件对应的参数List<Object> paramsList = new ArrayList<Object>();if(StringUtils.isNotBlank(keyword)){
            condition=" and o.keyword=?";
            paramsList.add(keyword);
        }//传递可变参数Object[] params = paramsList.toArray();//排序Map<String, String> orderby = new  LinkedHashMap<String, String>();
        orderby.put("o.ddlCode", "asc");
        List<ElecSystemDDL> list = elecSystemDDLDao.findCollectionByConditionNoPage(condition, params, orderby);return list;
    }

　Die findCollectionByConditionNoPage(condition, params, orderby)-Methode It ist eine von commonDao implementierte Methode, um die Abfrageergebnismenge (ohne Paging) gemäß angegebenen Bedingungen zurückzugeben

7. dictionaryEdit.jsp durchläuft den Wert des Objekts

<%@taglib uri="/struts-tags" prefix="s"%>

<s:if test="#request.list!=null && #request.list.size()>0">
                    <s:iterator value="#request.list">
                        <tr>
                           <td class="ta_01" align="center"  width="20%"><s:property value="ddlCode"/></td>
                           <td class="ta_01" align="center"  width="60%">
                                   <input id="<s:property value="ddlCode"/>" name="itemname" type="text" value="<s:property value="ddlName"/>"  size="45" maxlength="25"></td>
                           <td class="ta_01" align="center"  width="20%">
                                   <a href="#" onclick="delTableRow('<s:property value="ddlCode"/>')">
                            <img src="${pageContext.request.contextPath }/images/delete.gif" width="16" height="16" border="0" style="CURSOR:hand"></a>
                          </td>
                        </tr>
                    </s:iterator>
                </s:if>
                <s:else>
                    <tr>
                       <td class="ta_01" align="center"  width="20%">1</td>
                       <td class="ta_01" align="center"  width="60%">
                               <input name="itemname" type="text"  size="45" maxlength="25">
                       </td>
                       <td class="ta_01" align="center"  width="20%"></td>
                    </tr>
                </s:else>

　Effektanzeige:

　Vervollständigen Sie die Auswahltypliste und realisieren Sie den Inhalt Ersatz des Form2-Formulars.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von Ajax-Anwendungsbeispielen für DOM-Objekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!