STRUTS1.2+AJAX

最新推荐文章于 2021-08-05 22:20:24 发布

最新推荐文章于 2021-08-05 22:20:24 发布 · 224 阅读

文章标签：

#Ajax #Struts #IE #Firefox #JavaScript #ViewUI

在一个页面上有两个DIV，DIV1和DIV2，在DIV1中有一棵树，在DIV2中有一个struts form，在struts form中有一个文本框和一个提交按钮，我想实现如下功能：在文本框中写上信息，然后按提交按钮，提交按钮会调用struts的action，将文本框中的数据写入数据库中，然后DIV2中的struts form刷新为初始状态，我想知道如何实现页面DIV2的刷新而DIV1页面保持不变？有代码可以参考吗？

-----div 1------------ ------div 2------------------------
| tree | | ------struts form--------------|
| | | | text area |
| | | | button |
| | | --------------------------------|
------------------------- -----------------------------------

问题点数：100 回复次数：6 显示所有回复显示星级回复显示楼主回复修改删除举报引用回复

加为好友

发送私信

在线聊天

cloudgamer
http://shundebk.cn/ QQ76511088
等级:
可用分等级：富农
总技术专家分：14247
总技术专家分排名：1114

发表于：2007-02-07 21:52:091楼得分:0

帮顶

修改删除举报引用回复

加为好友

发送私信

在线聊天

shenglijay
无地放屎！！！
等级:
可用分等级：中农
总技术专家分：1253
总技术专家分排名：16177

发表于：2007-02-08 08:50:002楼得分:0

点击button，通过触发onclick事件。写点ajax代码应该可以实现的。通过你的js代码来提交给action.在通过响应信息来刷新你的form

修改删除举报引用回复

加为好友

发送私信

在线聊天

zhangsc
爱德华
等级:
可用分等级：富农
总技术专家分：56
总技术专家分排名：118779

发表于：2007-02-08 11:49:553楼得分:0

有一点我没有明白，在通过js来调用struts action,action结束后会调用forward，会使整个页面刷新，我想知道如何实现局部刷新，能给出具体的代码吗？

修改删除举报引用回复

加为好友

发送私信

在线聊天

shenglijay
无地放屎！！！
等级:
可用分等级：中农
总技术专家分：1253
总技术专家分排名：16177

发表于：2007-02-08 13:08:374楼得分:0

你调struts action 时侯，action 里面最后要返回一个forward对象时，你写成 return null; 这样它就会返回到你的页面。实现的效果就是局部刷新

修改删除举报引用回复

加为好友

发送私信

在线聊天

zhangsc
爱德华
等级:
可用分等级：富农
总技术专家分：56
总技术专家分排名：118779

发表于：2007-02-08 13:28:505楼得分:0

是可以这样做，但是却没有使用上Ajax技术，Ajax技术的优势一点都没有体现出来

修改删除举报引用回复

加为好友

发送私信

在线聊天

shenglijay
无地放屎！！！
等级:
可用分等级：中农
总技术专家分：1253
总技术专家分排名：16177

发表于：2007-02-08 17:18:296楼得分:100

页面：
------------------------------------------------------------
<html>
<head>
<script type= "text/javascript ">
var http = getHttpObject();

/* 确保在ie的各式版本，以及在firefox或其他浏览器下，都有用的xmlhttpRequest */
function getHttpObject(){
var xmlhttp = false;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType( 'text/xml ');
}
}
else{
try{
xmlhttp = new ActiveXObject( "Msxml2.XMLHTTP ");
}catch(e){
try{
xmlhttp = new ActiveXObject( "Microsoft.XMLHTTP ");
}catch(e){
xmlhttp = false;
}
}
}
return xmlhttp;
}

function handleHttpResponse(){
if(http.readyState == 4){
if(http.status == 200){
var text = http.responseText;
if(text != null || text.length > 0)
// update the textarea;
document.getElementById( "input ").value = text;
}
else{
alert( "error!!! ");
alert(http.status);
}
}
}

function getInfo(){
var url = "aaa.do "; // your action name
http.open( "GET ",url,true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
return ;
}
</script>
</head>
<body>
<div id= "tree " style= "width:150px;height:500px;float:left;background-color:limegreen; "> this is a menu tree </div>
<div id= "form " style= "width:820px;height:500px;float:left;background-color:yellow; ">
textArea: <input type= "text " id= "input "> <br>
<input type= "button " onclick= "getInfo(); " value= "Submit ">
</div>
</body>
</html>
-------------------------------------------
Action
--------------------------------------------
public class GetMsgAction extends Action {

public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) {
response.setContentType( "text/html ");
response.setCharacterEncoding( "utf-8 ");
try {
response.getWriter().write( "hello,this is the update text!! ");
} catch (IOException e) {
e.printStackTrace();
}
// should be return null;
return null;
}
}
-------------------------------------
大致就是这样啊，至于你要更新什么，还是从数据库取什么在更新就自己做吧，我只是做个简单的例子