数据字典的设计--4.DOM对象的ajax应用
需求:点击下拉选项框,选择一个数据类型,在表单中自动显示该类型下所有的数据项的名称,即数据库中同一keyword对应的所有不重复的ddlName。
1.在dictionaryIndex.jsp中添加:
<script type="text/javascript" src="${pageContext.request.contextPath }/script/pub.js"></script>
2.调用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');
}
}
其中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="#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>
效果展示:
完成选择类型列表,实现Form2表单的内容替换。
数据字典的设计--4.DOM对象的ajax应用的更多相关文章
- 电力项目十八--DOM对象的ajax
Ajax操作的核心对象:xmlreq = new XMLHttpRequest(); 第一步:在dictionaryIndex.jsp中添加: <script type="text/j ...
- js ajax 传送xml dom对象到服务器
客户端代码 1 <script> var isie = true; var xmlhttp = null; function createXMLHTTP() {//创建XMLXMLHttp ...
- JavaScript基础--DOM对象(十三):(windows对象:history\location\navigator\screen\event)
DOM编程1.为什么要学习DOM(1) 通过dom编程,我们可以写出各种网页游戏(2)dom编程也是ajax的重要基础2.DOM编程介绍DOM = Document Object Model(文档对象 ...
- JS,Jquery,ExtJs不同脚本动态创建DOM对象
好久不来写东西了,这段时间太慢了,闲了下来看了几篇文章,觉得很好,同时也许咱们大家都能遇到,所以就把它记录下来... 简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主 ...
- XMLHttpRequest对象进行Ajax操作
XMLHttpRequest 对象的三个常用的属性: 1. onreadystatechange 属性 onreadystatechange 属性存有处理服务器响应的函数. 请求状态改变的事件触发器 ...
- WebKit JavaScript Binding添加新DOM对象的三种方式
一.基础知识 首先WebKit IDL并非完全遵循Web IDL,只是借鉴使用.WebKit官网提供了一份说明(WebKitIDL),比如Web IDL称"operation”(操作), 而 ...
- 转:js包装DOM对象
我们在日常的应用中,使用Javascript大多数时间都是在用DOM ,以致于很多人都有一种看法就是DOM==JS,虽然这种看法是错误的,但是也可以说明DOM的重要性. 这就导致了我们在写JS的时候, ...
- Dom对象和JQuery对象的详细介绍及其区别
一直搞不清Dom对象和JQuery对象之间的区别,今天好好总结下 1.dom对象(摘抄自百度百科http://baike.baidu.com/link?url=4L8bZ7kW6kE-it4F-1LU ...
- JS、JQuery和ExtJs动态创建DOM对象
做了个简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主要是使用JavaScript.JQuery.ExtJs动态创建Table对象.动态Table数据填充.多选控制. ...
随机推荐
- C# 写 LeetCode easy #21 Merge Two Sorted Lists
21. Merge Two Sorted Lists Merge two sorted linked lists and return it as a new list. The new list s ...
- EasyUI+MVC4实现后台管理系统一:登陆和进入后台界面
首先实现登陆: 未完待续...
- PHP5 $this self parent static的区别
PHP5 是一具备了大部分面向对象语言的特性的语言,比PHP4 有了很多的面向对象的特性,但是有部分概念也比较绕人,所以今天拿出来说说,说 的不好,请高手见谅. (阅读本文,需要了解PHP5 的面向对 ...
- JavaScript -- 常用的日期对象和数学对象
创建一个时间对象 var time=new Date(); //当前时间,()内可写入字符串 ,如'2017-10-10',可转为响应的时间 常用方法 time.getFullYear(); //从 ...
- 51nod1305(简单逻辑)
题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1305 题意:中文题诶- 思路:1e5的数据直接暴力肯定是不行 ...
- 我的省选 Day -9
Day -9 不知不觉,日子已经变成一位数了,已经到了最后关头了. 早上班主任在上数学课时告诉我们,高校自招的降分政策已经没有以前那么优惠了(这我知道啊) 于是老师间接的暗示了奥赛如果没拿到省一就没什 ...
- 学习Vim的四周计划
来源:Python程序员 ID:pythonbuluo vim具有自定义配色方案,语法高亮,linting和自动填充功能 Vim是一个以非常难学而闻名的命令行文本编辑器(有个关于Vim的笑话:问如何生 ...
- PAT甲级——1099 Build A Binary Search Tree (二叉搜索树)
本文同步发布在CSDN:https://blog.csdn.net/weixin_44385565/article/details/90701125 1099 Build A Binary Searc ...
- 008-数据类型(Dictionary)
数据类型(Dictionary) 一.定义 字典是另一种可变容器模型,且可存储任意类型对象. 字典的每个键值 key=>value 对用冒号:分割,每个键值对之间用逗号,分割,整个字典包括在花括 ...
- React的核心概念
1.JSX的语法(javascript和XML结合的语法) 2.元素渲染(页面渲染) 3.组件 创建组件和组件之间传参 4.props属性 是父元素(父组件传递给子组件的值)和state状态(子组件自 ...