DOM对象的ajax应用实例详解

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

    

1.在dictionaryIndex.jsp中添加：

<script></script>

2.调用js的代码:

function changetype(){        
          if(document.Form1.keyword.value=="jerrynew"){            
             
               var textStr="<input> ";
             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 

　　（4）Pub.getReadyStateHandler方法

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

　　（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";
    }</elecsystemddl></elecsystemddl>

5.IElecSystemDDLService中声明

List<elecsystemddl> findSystemDDLListByKeyword(String keyword);</elecsystemddl>

6.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> orderby = new  LinkedHashMap<string>();
        orderby.put("o.ddlCode", "asc");
        List<elecsystemddl> list = elecSystemDDLDao.findCollectionByConditionNoPage(condition, params, orderby);return list;
    }</elecsystemddl></string></string></object></object></elecsystemddl>

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

 7.dictionaryEdit.jsp遍历对象的值

<if>0">
                    <iterator>
                        <tr>
                           <td><property></property></td>
                           <td>
                                   <input>" name="itemname" type="text" value="<property></property>"  size="45" maxlength="25"></td>
                           <td>
                                   <a></a>')">
                            <img  src="/static/imghwm/default1.png" data-src="${pageContext.request.contextPath }/images/delete.gif" class="lazy" alt="DOM对象的ajax应用实例详解" >
                          </td>
                        </tr>
                    </iterator>
                </if>
                <else>
                    <tr>
                       <td>1</td>
                       <td>
                               <input>
                       </td>
                       <td></td>
                    </tr>
                </else>

　　效果展示：

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

以上是DOM对象的ajax应用实例详解的详细内容。更多信息请关注PHP中文网其他相关文章！