jsp页面中局部模块数据刷新的实现
需求如下图所示：
1.首先想到的方式是：
给发布类型（select标签）添加onchange()事件，值不同，调用不同的action做数据处理，转发到不同的jsp页面上去显示：代码如下：
<script language="javascript">
function reUpdate(val) {
if(val=="1") {
document.form.action="firmware!gotoaddConf.do";
document.form.submit();
}else if(val=="2") {
document.form.action="firmware!gotoaddConf2.do";
document.form.submit();
}
}
</script>
<select name="releaseType1"style="width=220"id="select1"onchange="reUpdate(this.value)">
<optionvalue ="1">发布版本option>
<%--内测版本--%><optionvalue ="2"selected>公测版本option>
select>
对应的struts.xml部分：（url中以firmware!开头的网页都会去对应的action中找对应的方法，例如这里的GetFirmwareAction，去找对应的方法，例如http://localhost:8090/firmware!gotoaddConf.do就会去GetFirmwareAction中找gotoaddConf的方法。gotoaddConf方法返回值即代表要转发的jsp页面的逻辑名称，例如gotoaddConf方法会返回一个“addConf”的字符串，就会去structs.xml中找对应的jsp页面，这里是addfirwareconf.jsp.如何做到的？这就是使用架构的好处）
<actionname="firmware!*"class="com.yf.weloop.action.GetFirmwareAction"method="{1}">
<resultname="addConf">/admin/addfirwareconf.jspresult>
<resultname="addConf2">/admin/addfirwareconf2.jspresult>
action>
对应的action和响应的方法：
public classGetFirmwareActionextendsBaseAction {
...
publicString gotoaddConf() {list=firmwareService.getfirmtype();list2=firmwareService.getFirmwareVersion();
return"addConf";
}
publicString gotoaddConf2() {list=firmwareService.getfirmtype();list2=firmwareService.getFirmwareVersion();
return"addConf2";
}
...
}
这种方式的一个缺点是：需要在action中新建不同的方法处理不同的响应逻辑，需要处理多个jsp页面，显示不同的页面，最主要的问题是整个页面都会刷新。
2.方式2：使用ajax技术
方法1：
<scripttype="text/javascript"src="<%=request.getContextPath()%>/js/jquery-1.10.2.js">script>
（将ajax函数封装在.js文件中，所以要引入该js文件，如下方式引入）
<scriptsrc="<%=request.getContextPath()%>/js/myajax.js">script>
myajax.js中：
function ajaxUpdate1(val) {
var xmlhttp;
if(window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=newXMLHttpRequest();
}else{// code for IE6, IE5xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if(xmlhttp.readyState==4&&xmlhttp.status ==200) {
varstr=xmlhttp.responseText;
varobj=eval("("+str+")");//将数据转换成json类型
if(val =="1") {
if(obj[0].wn02b01 !=null) {
$("#firmwareVersion1").val(obj[0].wn02b01);
}
}else if(val =="2") {
if(obj[1].wn02b01 !=null) {
$("#firmwareVersion1").val(obj[1].wn02b01);
}
}
}
}
xmlhttp.open("GET","firmware!getData.do",true);
xmlhttp.send();
}
方法2：
myajax中：
functionajaxUpdate3(val) {
$.ajax({
type:"GET",
url:"firmware!getData.do",
async:true,
//dateType: "json",
data:null,
success:function(data) {
var obj=eval("("+data+")");//将数据转换成json类型if(obj[0].wn02b01 !=null) {
$("#firmwareVersion1").val(obj[0].wn02b01);
}
},
error:function(e) {
alert("获取数据失败!");
}
});
}else if(val =="2") {
$.ajax({
type:"get",
async:true,
//dateType:"json",
data:null,
success:function(data) {
varobj=eval("("+data+")");//将数据转换成json类型// alert("调用数据成功！");
if(obj[1].wn02b01 !=null) {
$("#firmwareVersion1").val(obj[1].wn02b01);
}
},
error:function(e) {
alert("获取数据失败!");
}
});
}
}
注意：ajax的以上两中方法都需要导入jquery-1.10.2.js当然，可以使用不同的版本。
Ajax的最大的好处是，只刷部分模块，而且可以实现js和服务器之前的异步（没有获得响应之前我可以做我的事情而不是一直等待），这样执行操作也会快很多。
