首页 > 代码库 > 数据字典的设计--4.DOM对象的ajax应用

数据字典的设计--4.DOM对象的ajax应用

  需求:点击下拉选项框,选择一个数据类型,在表单中自动显示该类型下所有的数据项的名称,即数据库中同一keyword对应的所有不重复的ddlName。

技术分享技术分享技术分享    技术分享

1.在dictionaryIndex.jsp中添加:

<script type="text/javascript" src="http://www.mamicode.com/${pageContext.request.contextPath }/script/pub.js"></script>

2.调用js的代码:

技术分享
function changetype(){
        
          if(document.Form1.keyword.valuehttp://www.mamicode.com/=="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‘);
          }  
       }
View Code

  其中submitActionWithForm方法在pub.js中进行定义。

3.在pub.js中定义5种方法:

  (1)Pub.submitActionWithForm方法

/***
 * 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)Pub.newXMLHttpRequest方法

/**
 * 用于创建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()是Ajax操作的核心对象

  (3)Pub.getParams2Str方法

/**
 * @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方法

/**
 * @Description:接收服务器端返回的结果
 * @param req:引擎对象
 * @param eleid:表单Form2的名称
 * @param responseXmlHandler:Pub.handleResponse(函数体)
 * @returns {Function}
 */
Pub.getReadyStateHandler =function getReadyStateHandler(req, eleid,responseXmlHandler) {
  
  return function () {
    /**
     * req.readyState:用来监听客户端与服务器端的连接状态
     * 0:表示此时客户端没有调用open()方法
     * 1:表示客户端执行open方法,但是send方法没有执行
     * 2:open方法执行,send方法也执行
     * 3:服务器开始处理数据,并返回数据
     * 4:返回数据成功,只有4这个状态,才能获取服务器端返回的结果
     */
    if (req.readyState == 4) {
       /**
        * req.status:表示java的状态码
        * 404:路径错误
        * 500:服务器异常
        * 200:表示没有异常,正常访问数据,只有200这个状态的时候,才能获取服务器端返回的结果
        */
      if (req.status == 200) {
          /**
           * req.responseText:获取服务器端返回的结果,返回的是文本的结果(包括:字符串,json数据)
           * req.responseXML:获取服务器端返回的结果,返回的是XML数据的结果
           */
        responseXmlHandler(req.responseText,eleid);
 
      } else { 
        alert("HTTP error: "+req.status);
        return false;
      }
    }
  }

  (5)Pub.handleResponse方法

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

  接下来就是对Action类的操作,需要到数据库根据keyword查询相应的ddlName。操作:

  技术分享

4.在ElecSystemDDLAction中添加Edit()方法

/**  
    * @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.IElecSystemDDLService中声明

List<ElecSystemDDL> findSystemDDLListByKeyword(String keyword);

6.ElecSystemDDLServiceImpl中重写方法

/**  
    * @Name: findSystemDDLListByKeyword
    * @Description: 根据数据类型名称查询数据字典
    * @Parameters: keyword:数据类型名称
    * @Return: List:存储ElecSystemDDL对象集合
    */
    @Override
    public 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;
    }

  其中findCollectionByConditionNoPage(condition, params, orderby)方法是commonDao实现的根据指定条件,返回查询结果集(不分页)的方法

 7.dictionaryEdit.jsp遍历对象的值

<%@taglib uri="/struts-tags" prefix="s"%>
<s:if test="#request.list!=null && #request.list.size()>0">
                    <s:iterator value="http://www.mamicode.com/#request.list">
                        <tr>
                           <td class="ta_01" align="center"  width="20%"><s:property value="http://www.mamicode.com/ddlCode"/></td>
                           <td class="ta_01" align="center"  width="60%">
                                   <input id="<s:property value="http://www.mamicode.com/ddlCode"/>" name="itemname" type="text" value="http://www.mamicode.com/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>

  效果展示:

技术分享

  完成选择类型列表,实现Form2表单的内容替换。

技术分享

数据字典的设计--4.DOM对象的ajax应用