昨天在做项目过程中遇到过一个问题，虽然问别人，但是给的都是我不太理解的那种代码，一个人一种思维方式，所以决定自己实现，现在把代码和实现方式贴在下面，供大家参考，尤其是那些JS能力不强的人参考，本人的JS能力也是有限。
1.jsp表单页面：//页面采用struts2标签 这里的ID A1主要是为了下面增加行做准备
<tr id="a1">
<td align="center">
<s:select list="mattypelist" headerKey="0" id="equipments"
name="equipment" headerValue="--选择设备--" listKey="mtrltpId"
listValue="mtrltpName" cssStyle="102px" onchange="checkU(this)"></s:select>
</td>
<td align="center">
<s:select list="{}" id="mate" name="mate" headerKey="0"
headerValue="--请选择型号--"></s:select>
</td>
<td align="center">
<s:textfield name="amount"></s:textfield>
</td>
</tr>
2.表的动态行添加 这是跟网上其它的哥们学的，采用的是克隆的技术
code：
<script type="text/javascript">
function addrow(){
var newTR = a1.cloneNode(true);
a1.parentNode.insertAdjacentElement("beforeEnd",newTR);
}
</script>
3.实现Ajax的级联：这里需要重点说一下：HTML的本质是一个XML文件，那么我们就可以采用XML的格式来取值，obj是第一个级联传的对象，通过第一个对象点父类节点再点父类节点 那么就是select的tr，取tr的第1个具有TD标签的子元素（值是从0开始） 正好是我的另一个下拉列表的列。
这里的TROBJ为的就是让 第一个下拉列表触发的事件获取到的值能赋值到 与它在同一行的下拉列表上。
var trobj;
//表单验证
function checkU(obj) {
var id = obj.value;
// alert(id);
trobj = obj.parentNode.parentNode;
createRequest("hhs/ajaxmat.action?id=" + id + "&random=" + new Date());
}
var http_request = false;
function createRequest(url) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType("text/xml"); //设置MIME类别
}
} else {
if (window.ActiveXObject) { // IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
}
}
}
}
if (!http_request) {
alert("\u4e0d\u80fd\u521b\u5efaXMLHttpRequest\u5bf9\u8c61\u5b9e\u4f8b\uff01");
return false;
}
http_request.open("GET", url, true); //这里post与get的区别
http_request.onreadystatechange = alertContents; //指定响应方法
http_request.send(null); //这里send的区别
}
function alertContents() {
if (http_request.readyState == 4) {
// 判断请求状态
// alert("响应状态值："+http_request.status);
if (http_request.status == 200) { // 请求成功，开始处理返回结果
// alert(http_request.responseText);
//下面的代码是重点中的重点 是我写的Ajax的关键
trobj.getElementsByTagName("td")[1].innerHTML = http_request.responseText;
// alert(http_request.responseText); //这里alert与deal的区别
} else {
if (http_request.status == 500) {
alert(http_request.responseText);
}
//请求页面有错误
alert("\u60a8\u6240\u8bf7\u6c42\u7684\u9875\u9762\u6709\u9519\u8bef\uff01");
}
}
}
4。Ajax响应获取到的值：是设置在action中的
/**
*ajax返回的设备具体型号设备列
* @return
* @throws Exception
*/
public void ajaxMatTyp() throws Exception
{
String mid = ServletActionContext.getRequest().getParameter("id");
ServletActionContext.getResponse().setContentType("text/xml; charset=UTF-8");
String xml = clientBaseInfo.getMateXml(mid);
System.out.println("材料XML："+xml);
String sb ="<select name='mate' id='mate' style='width:120px'><option>请选择</option>";
List<Material> ml = clientBaseInfo.qryMateList(xml);
System.out.println("长度："+ml.size());
for(int i =0;i<ml.size();i++)
{
Material m = ml.get(i);
sb+="<option value="+m.getMtrlId()+">"+m.getMtrlName()+"</option>";
}
sb+="</select>";
PrintWriter o = ServletActionContext.getResponse().getWriter();
o.println(sb);
o.flush();
o.close();
}
返回的sb就是被Ajax获取到的http_request.responseText;
5.action中获取值 那只要使用getparemetervalues("xx");就可以获取到参数的数组了。
做完后的效果如下面的贴图：
最新评论