jsp-javascript-ajax的联合使用

一个jsp-javascript-ajax间的调用竟让我写了三天，最后朋友的二分钟就给搞定了，真的把我给郁闷坏了。这说明一个问题学习不扎实，不追根求底，（还有最近比较毛躁，没有踏实下心来，只想着完成任务赶紧找工作了），在一个就是心态问题，起初就把他给想的太复杂了，其实有的时候就是这样，程序吗掌握在人的手中，灵活一些，那样你会更快乐。

呵呵呵，记得做什么事情不要总是一味的要等待看结果，在这等待中所做的细节会比最后的结果更美好，真的，在你期待好的结果出现的时候其实你正错过了这过程的完美，真的是这样，我奉劝向我一样的朋友，都能够好好的静下心来想想这个事情，可不要小看这个问题哦，不信等你遇到了你会觉得真的要命，呵呵呵先不感慨了，咱们还是好好总结一下真正的程序经验吧！

我给大家看看我的源代码(部分内容)，共分三部分
addOrderForm.jsp
orderJS.js
returnOrderInfo.jsp


addOrderForm.jsp

td1.innerHTML = curCount; 

td2.innerHTML = '<input type="text" name="spbm1" id="spbm1'+curCount+'" size="5" value="" readonly>';

td3.innerHTML = '<input type="text" name="spms1" id="spms1'+curCount+'" size="46" value="" readonly>';

td4.innerHTML = '<select name="splb1" id="splb1'+curCount+'" style="width:6em" onchange="MulSelect(\'1\',\''+curCount+'\')"></select>';

td5.innerHTML = '<select name="sppp1" id="sppp1'+curCount+'" style="width:6em" onchange="MulSelect(\'2\',\''+curCount+'\')"></select>';

td6.innerHTML = '<select name="spgg1" id="spgg1'+curCount+'" style="width:6em" onchange="orderInfo('+curCount+')"></select>';

td7.innerHTML = '<input type="text" name="sl1" id="sl1'+curCount+'" size="1" value="" maxlength="4">';

td8.innerHTML = '<input type="text" name="dw1" id="dw1'+curCount+'" size="1" style="width:1.5em;" value="">';

td9.innerHTML = '<input type="text" name="dj1" id="dj1'+curCount+'" size="2" value="">';

td10.innerHTML = '<input type="text" name="zk1" id="zk1'+curCount+'" size="2" value="" onblur="countJE(this)">';

td11.innerHTML = '<input type="text" name="je1" id="jr'+curCount+'" size="6" value=""  onblur="countZK(this)">';

td12.innerHTML = '<input type="text" name="bz1" id="bz1'+curCount+'" size="18" value="">';

td13.innerHTML = '<span onClick=\'deleteTR("tr'+curCount+'",0)\' style="cursor:pointer">删除</span>';


orderJS.js




/*此javascript用于订单信息根据类别，品牌，规格的联动而做出其它字段的显示*/

/*用ajax返回一个url*/
function fnGetURLByAjaxReturn(url)
{
/*定义一个标记*/
var http_request = false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest) { //Mozilla 浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//设置MiME类别
http_request.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject) { // IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {alert("错了吧");}
}
}
if (!http_request) { // 异常，创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}

/*我将发送的方式，发送的地址，发送是否同步装进open中*/
http_request.open("GET", url, false);

/*将信息发送指定地址*/
http_request.send(null);


var　reValue = "";
try{
/*可以获取到从指定地址（addOrderForm.jsp）返回的多有text信息*/
var reValue = trim(http_request.responseText);
}catch( xe){
alert("Exception: " + xe);
}
return reValue;
}

/*去掉前后空格*/
function trim(str){  //删除左右两端的空格
return str.replace(/(^\s*)|(\s*$)/g, "");
}



returnOrderInfo.jsp


<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" language="java"%>
<%@ include file="/basicLabel.jsp" %>

<%--注意g.recycleFlag=0的情况 --%>

<%--看看from语句，不要单单写上某个表，既然了就一定要有一个关联关系，正如g.goodsID=p.goodsID否则会出现笛卡尔及 --%>
<sql:query var = "selOrderInfo" dataSource="${connectDBSource}">
select g.serialNum,g.fullName,p.price,g.units,p.discount,d.text,g.category,g.brand,g.sizeNum,g.goodsID,p.goodsID
        from goods g,price p ,datadictionary d
        where g.category='<%=request.getParameter("splb1") %>'
        and g.brand = '<%=request.getParameter("sppp1") %>'
        and sizeNum='<%=request.getParameter("spgg1") %>'
        and g.units = d.keyName
        and g.goodsID=p.goodsID
</sql:query>
<c:forEach var = "row" items="${selOrderInfo.rows}">
<c:out value="${row.serialNum}" />,<c:out value="${row.fullName}" />,<c:out value="${row.price}" />,<c:out value="${row.text}" />,<c:out value="${row.discount}" />,<c:out value="<%=request.getParameter("curCount") %>"/>
</c:forEach>



我要说的问题是在这
td4.innerHTML = '<select name="splb1" id="splb1'+curCount+'" style="width:6em" onchange="MulSelect(\'1\',\''+curCount+'\')"></select>';

td5.innerHTML = '<select name="sppp1" id="sppp1'+curCount+'" style="width:6em" onchange="MulSelect(\'2\',\''+curCount+'\')"></select>';

td6.innerHTML = '<select name="spgg1" id="spgg1'+curCount+'" style="width:6em" onchange="orderInfo('+curCount+')"></select>';

这几行信息主要是处理了一下三级联动，而当我选择完spgg1里面对应的值时，我要做的一件事是通过这三个联动信息显示出表中其它的信息，在这个过程中用到了ajax的问题。

我在spgg1里面onchange方法中必须跟传一个动态变量（因为我的订单表的每次联动的具体某条信息是根据curCount决定的），这里要注意一个问题就是当我们在处理问题时一定要从最更本的出发，既然我splb1，sppp1，spgg1的联动是根据我最后触动的spgg1决定的到底我触动的是那条信息那么我们就应该将我们触动的这条信息保存下来（一遍以后使用，当我的curCount是1是证明是第一条信息，为2时是第二条信息，为3是是第三条信息，那么4时呢........），那么我的其它表的信息根据谁决定添加到哪个联动相应的条上呢，splb1+curCount，sppp1+curCount，spgg1+curCount的变化知道到底是哪条信息触动的了，也知道返回的信息添加到哪里去了，呵呵呵。


在这个过程中我们用到了一个js代码（在addOrderForm.jsp中应用了相关的js,并且调用了其中负责主操作的代码方法 fnGetURLByAjaxReturn(url)），里面使用了ajax的内容，这个ajax的作用主要是负责发送一个请求（url，还有我们选定的信息splb1+curCount，sppp1+curCount，spgg1+curCount的信息）到服务器端,服务器端（我们写了一个程序returnOrderInfo.jsp负责查询，显示[是利用C:OUT的方式将信息输出到此页面，ajax会将此页面返回，然后我们就能够得到这个页面的所有的信息了，然后我们在得到的页面addOrderForm.jsp中利用split的方式分割，最后将每个信息添加到相应的位置上]）。

在这一段 叙述中我们当注意的是有几点1。我们要使用js，那么我们就必须引入2.既然要使用引用了还不行，调用该方法，呵呵呵3.js(ajax代码)只做了一下客户端和服务器段查询了信息的操作，在此过程中js代码只是负责了一下连接的作用，我们没必要在js上大动干戈，只要在addOrderForm.jsp中调用js方法的时候把我们要处理的参数一并带上就可以了，到了处理页面用request.getParameter("")的方法处理就可以了，当信息是怎么返回的我们也不用管，只知道这样调用之后js（ajax）中会给我们返回处理页面上的值。3在得到了返回页面的值时我们用到了split方法，呵呵split方法和我们平时用的split方法是一样的，然后我们截取，最后通过document.getElementByID("").value=newRetVal[i]的方法付到相应位置上就可以了。

总结：ajax在javascript和jsp间只做了一个连接，但是很奇妙的，说了这么多不知道你明白了没有，还是更晕了，呵呵没关系的好好体会一下吧，实在不明白再问我也可以啊。

评论

1 楼 tanglei198577 2008-07-02