思路是: 首页index.jsp,动态加载数据的action: loadIndex.action
在访问index.jsp时,执行loadIndex.action,由action得到数据库中数据后,[color=red][b]仍然将数据返回给index.jsp[/b][/color]由index.jsp显示数据.
[b]问题补充:[/b]
谢谢3位的回答,
lovewhzlq (CTO) 大大,
我尝试用ExtJs实现Ajax提交,
[code="java"]
Ext.onReady(function() {
window.location.href = 'loadindex.action?id=xxxx;
}
);[/code]
却无法避免重复执行action的问题,变成死循环了.
有什么办法能让它只执行一次呢?
就像Ext.data.Store那样只load一次.
[b]问题补充:[/b]
确实是,
Ext里有无可以用来调用url的东东呢?
[code="java"]
Ext.Ajax.request({
url : 'loadindex.action?id=xxx
});
[/code]
?
[b]问题补充:[/b]
感谢 lovewhzlq (CTO) 大大,
我现在已经可以成功提交ajax请求去执行loadIndex.action了.
[code="java"]
Ext.onReady(function() {
Ext.Ajax.request({
url : 'loadindex.action?id=LiteonIT'
});
});
[/code]
可是发现执行完后返回的数据struts2标签无法识别?
我在firebug下可以看到数据库的返回数据.
但是用之类的标签却得不到数据,页面空白.
是否跟Ext.Ajax.request返回的数据格式有关?
[b]问题补充:[/b]
[code="java"][/code]谢谢.
index.jsp
[code="xml"]
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Tools Shop</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/boxOver.js"></script>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/loadIndex.js"></script>
</head>
<body>
<div id="main_container">
<div id="header">
<div class="top_right">
<div class="languages">
<div class="lang_text">
Languages:
</div>
<a href="#" class="lang"><img src="images/en.gif" alt=""
title="" border="0" /> </a>
<a href="#" class="lang"><img src="images/de.gif" alt=""
title="" border="0" /> </a>
</div>
<div class="big_banner">
<a href="#"><img src="images/banner728.jpg" alt="" title=""
border="0" /> </a>
</div>
</div>
<!-- Company Logo here -->
<div id="logo">
<s:iterator id="company" value="cpy">
<img src="images/<s:property value="logo"/>" />
</s:iterator>
</div>
</div>
<div id="main_content">
<div id="menu_tab">
<ul class="menu">
<li>
<a href="index.jsp" class="nav"> Home </a>
</li>
<li class="divider"></li>
<li>
<a href="#" class="nav">Products</a>
</li>
<li class="divider"></li>
<li>
<a href="#" class="nav">News</a>
</li>
<li class="divider"></li>
<li>
<a href="#" class="nav">My account</a>
</li>
<li class="divider"></li>
<li>
<a href="#" class="nav">Sign Up</a>
</li>
<li class="divider"></li>
<li>
<a href="contact.jsp" class="nav">Contact Us</a>
</li>
</ul>
</div>
<!-- end of menu tab -->
<div class="crumb_navigation">
Navigation:
<span class="current">Home</span>
</div>
<div class="left_content">
<div class="title_box">
Shotcut
</div>
<ul class="left_menu">
<!-- Company quick link here -->
<li class="odd">
<!-- add tag # here -->
<a href="index.jsp#cpypic">Company Picture</a>
</li>
<li class="even">
<a href="index.jsp#cpydesc">EnterPrise Introduce</a>
</li>
<!-- Company detail shotcut -->
<s:iterator value="cpydetail" status="index">
<s:if test="#index.odd == true">
<li class="odd">
</s:if>
<s:else>
<li class="even">
</s:else>
<a href="loadindex.action?id=LiteonIT#<s:property value=" id"/>">
<s:property value="name" />
</s:iterator>
</ul>
<div class="title_box">
Newsletter
</div>
<div class="border_box">
<input type="text" name="newsletter" class="newsletter_input"
value="your email" />
<a href="#" class="join">subscribe</a>
</div>
</div>
<!-- end of left content -->
<div class="center_content">
<div class="oferta">
<div class="oferta_details">
<!-- Company Name,Picture and Description here -->
<s:iterator value="cpy">
<div class="oferta_title">
Company Name
</div>
<div class="oferta_text_bold">
<s:property value="name" />
</div>
<div class="oferta_title">
Company Picture
<a name="cpypic"></a>
</div>
<div class="oferta_text">
<img src="images/<s:property value="picture"/>" width=540
height=250 />
</div>
<div class="oferta_title">
Company Description
<a name="cpydesc"></a>
</div>
<div class="oferta_text">
<s:property value="description" />
</div>
</s:iterator>
<!-- Company Detail here -->
<s:iterator value="cpydetail">
<div class="oferta_title">
<s:property value="name" />
<a name="<s:property value="id" />"></a>
</div>
<div class="oferta_text">
<s:property value="value" />
</div>
</s:iterator>
</div>
</div>
</div>
<!-- end of center content -->
<div class="right_content">
<div class="title_box">
Search
</div>
<div class="border_box">
<input type="text" name="newsletter" class="newsletter_input"
value="keyword" />
<a href="#" class="join">search</a>
</div>
<div class="title_box">
Friendly Link
</div>
<ul class="left_menu">
<s:iterator id="fl" value="friendlylink" status="index">
<s:if test="#index.odd == true">
<li class="odd">
</s:if>
<s:else>
<li class="even">
</s:else>
<a href="http://<s:property value="fl"/>"> <s:property
value="fl" /> </a>
</li>
</s:iterator>
</ul>
</div>
<!-- end of right content -->
</div>
<!-- end of main content -->
<div class="footer">
<div class="left_footer">
<img src="images/footer_logo.png" alt="" title="" width="89"
height="42" />
</div>
<div class="center_footer">
Template name. All Rights Reserved 2009
<br />
<img src="images/payment.gif" alt="" title="" />
</div>
<div class="right_footer">
<a href="index.jsp">home</a>
<a href="details.jsp">about</a>
<a href="details.jsp">sitemap</a>
<a href="details.jsp">rss</a>
<a href="contact.jsp">contact us</a>
</div>
</div>
<!-- end of footer -->
</div>
<!-- end of main_container -->
</body>
[/code]
loadIndex.js:
[code="java"]
Ext.onReady(function() {
Ext.Ajax.request({
url : 'loadindex.action?id=LiteonIT'
});
});
[/code]
struts.xml:
[code="java"]
method="loadCompanyInfo">
/index.jsp
companyInfoAction:
[code="java"][/code]
public String loadCompanyInfo() {
this.setCpy(ci.getCompanyInfo(this.getId()));
this.setCpydetail(ci.getCompanyDetail(this.getId()));
this.setFriendlylink(ci.getFriendlyLink(this.getId()));
System.out.println("I am running");
return SUCCESS;
}
[/code]
访问index.jsp时可以看到System.out.println("I am running");执行了,firebug下也可以看到数据返回.
[b]问题补充:[/b]
index.jsp:
[code="xml"]
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Tools Shop</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/boxOver.js"></script>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/loadIndex.js"></script>
</head>
<body>
<div id="main_container">
<div id="header">
<div class="top_right">
<div class="languages">
<div class="lang_text">
Languages:
</div>
<a href="#" class="lang"><img src="images/en.gif" alt=""
title="" border="0" /> </a>
<a href="#" class="lang"><img src="images/de.gif" alt=""
title="" border="0" /> </a>
</div>
<div class="big_banner">
<a href="#"><img src="images/banner728.jpg" alt="" title=""
border="0" /> </a>
</div>
</div>
<!-- Company Logo here -->
<div id="logo">
<s:iterator id="company" value="cpy">
<img src="images/<s:property value="logo"/>" />
</s:iterator>
</div>
</div>
<div id="main_content">
<div id="menu_tab">
<ul class="menu">
<li>
<a href="index.jsp" class="nav"> Home </a>
</li>
<li class="divider"></li>
<li>
<a href="#" class="nav">Products</a>
</li>
<li class="divider"></li>
<li>
<a href="#" class="nav">News</a>
</li>
<li class="divider"></li>
<li>
<a href="#" class="nav">My account</a>
</li>
<li class="divider"></li>
<li>
<a href="#" class="nav">Sign Up</a>
</li>
<li class="divider"></li>
<li>
<a href="contact.jsp" class="nav">Contact Us</a>
</li>
</ul>
</div>
<!-- end of menu tab -->
<div class="crumb_navigation">
Navigation:
<span class="current">Home</span>
</div>
<div class="left_content">
<div class="title_box">
Shotcut
</div>
<ul class="left_menu">
<!-- Company quick link here -->
<li class="odd">
<!-- add tag # here -->
<a href="index.jsp#cpypic">Company Picture</a>
</li>
<li class="even">
<a href="index.jsp#cpydesc">EnterPrise Introduce</a>
</li>
<!-- Company detail shotcut -->
<s:iterator value="cpydetail" status="index">
<s:if test="#index.odd == true">
<li class="odd">
</s:if>
<s:else>
<li class="even">
</s:else>
<a href="loadindex.action?id=LiteonIT#<s:property value=" id"/>">
<s:property value="name" />
</s:iterator>
</ul>
<div class="title_box">
Newsletter
</div>
<div class="border_box">
<input type="text" name="newsletter" class="newsletter_input"
value="your email" />
<a href="#" class="join">subscribe</a>
</div>
</div>
<!-- end of left content -->
<div class="center_content">
<div class="oferta">
<div class="oferta_details">
<!-- Company Name,Picture and Description here -->
<s:iterator value="cpy">
<div class="oferta_title">
Company Name
</div>
<div class="oferta_text_bold">
<s:property value="name" />
</div>
<div class="oferta_title">
Company Picture
<a name="cpypic"></a>
</div>
<div class="oferta_text">
<img src="images/<s:property value="picture"/>" width=540
height=250 />
</div>
<div class="oferta_title">
Company Description
<a name="cpydesc"></a>
</div>
<div class="oferta_text">
<s:property value="description" />
</div>
</s:iterator>
<!-- Company Detail here -->
<s:iterator value="cpydetail">
<div class="oferta_title">
<s:property value="name" />
<a name="<s:property value="id" />"></a>
</div>
<div class="oferta_text">
<s:property value="value" />
</div>
</s:iterator>
</div>
</div>
</div>
<!-- end of center content -->
<div class="right_content">
<div class="title_box">
Search
</div>
<div class="border_box">
<input type="text" name="newsletter" class="newsletter_input"
value="keyword" />
<a href="#" class="join">search</a>
</div>
<div class="title_box">
Friendly Link
</div>
<ul class="left_menu">
<s:iterator id="fl" value="friendlylink" status="index">
<s:if test="#index.odd == true">
<li class="odd">
</s:if>
<s:else>
<li class="even">
</s:else>
<a href="http://<s:property value="fl"/>"> <s:property
value="fl" /> </a>
</li>
</s:iterator>
</ul>
</div>
<!-- end of right content -->
</div>
<!-- end of main content -->
<div class="footer">
<div class="left_footer">
<img src="images/footer_logo.png" alt="" title="" width="89"
height="42" />
</div>
<div class="center_footer">
Template name. All Rights Reserved 2009
<br />
<img src="images/payment.gif" alt="" title="" />
</div>
<div class="right_footer">
<a href="index.jsp">home</a>
<a href="details.jsp">about</a>
<a href="details.jsp">sitemap</a>
<a href="details.jsp">rss</a>
<a href="contact.jsp">contact us</a>
</div>
</div>
<!-- end of footer -->
</div>
<!-- end of main_container -->
</body>
[/code]
[b]问题补充:[/b]
index.jsp中
第150行开始用struts2标签获取数据库数据.
[b]问题补充:[/b]
loadIndex.js的内容如下
window.location.href = 'loadindex.action?id=xxxx';
这里是不是应该用ajax 请求啊,直接window.location.href 的话会重复执行,进入死循环.
放在
之前的话,
ExtJs识别不了吧?
[b]问题补充:[/b]
再次感谢lovewhzlq (CTO)大大的热心回复.
其实我现在就是用2个页面做的,一个configIndex.jsp,一个index.jsp.在configIndex中提交action,转到index.jsp.
之所以搞得这么麻烦,主要是为了避免用户直接通过地址栏访问index.jsp的时候出不来数据的问题.
现在问题其实已经解决了一大半拉.用ajax提交action后可以看到执行了一次,数据库数据返回也有,反而是struts2标签失效了,很纳闷.
[b]问题补充:[/b]
其实web程序对用户直接用地址访问页面的做法都比较难处理.不知道是否有好的方式避免掉这种问题.
[b]问题补充:[/b]
感谢energykey兄的回答,鄙视 得好.
也就是说,
ajax请求的返回,只能用response.responseText或者json来获取,
struts2标签是不行的了.它们是2条路的人.
因为ajax是异步的请求,
struts2走的路是A的话,ajax的请求走的是B?
那你可以设置过滤器嘛,拦截对index.jsp的请求,把它跳转到到action请求嘛
当然可以实现啊,
在index.jsp页面里,用ajax去调用loadIndex.action 得到数据,
然后再显示数据嘛
把数据保存在session中就可以了
你怎么会用window.location.href = 'loadindex.action?id=xxxx;这样的方式呢,
当然不能这么搞嘛,
很简单的api嘛
http://allenj2ee.iteye.com/blog/133954
你把页面代码粘出来看看再说
你应该是访问index.jsp时自动跳转到loadIndex.action,
loadIndex.js的内容如下
window.location.href = 'loadindex.action?id=xxxx';
index.jsp修改如下
<head>
<title>Tools Shop</title>
[color=red][/color]
</head>
对,这有个循环的问题
我建议还是另搞个页面叫loadIndex.jsp,
内容和index.jsp一样,不过把 去掉,
struts.xml修改下就行了:
<action name="loadindex" class="companyInfoAction"
method="loadCompanyInfo">
<result name="success">/[color=red]loadIndex.jsp[/color]</result>
</action>
然后呢,index.jsp页面内容就
loadIndex.js的内容如下
window.location.href = 'loadindex.action?id=xxxx';
这样不就很容易就解决了问题
楼主,我看了你的问题,和补充,很想鄙视你一下,挣你的分可真不容易。
你最后的问题,我只想说,struts2标签是什么?是jsp tag,本质上就是jsp自定义标签,只不过是struts2定义的标签,那这种标签是属于什么里面的?当然是jsp了,jsp是怎么运行的?先编译然后执行,在哪执行?当然是在服务端了,也就是web容器,比如tomcat。也就是说,在页面load完之后,就不干jsp tag什么事了,这时的jsp tag已经被服务器输出到客户端也就是浏览器上,已经是纯粹的html代码了。
js是什么?js就是专门操作客户端的。你用ext获取的数据在js里,ajax事什么?就是页面无刷新的异步请求。此时已经不关你什么struts2标签的事儿了。现在要做的就是把js里存的数据传到页面去,这还不简单么、?
用div.innerHTML="";
如果你返回的是一个list.那么你用js for循环。不知道你有没有用json。不过按照你的想法,return success ,如果success定义的是一个index.jsp,那么服务端会返回一个index.jsp网页源代码,这个时候只要使用div.getElementByTagName("body").innerHTML=xxx;【xxx就是你js回调函数返回的response.responseText】.OK。
简单说来,楼主需要的就是一个最基本的AJAX应用,用户访问index.jsp。index.jsp 加载时异步调用action并返回数据,然后加载对应模块的数据。
多看看原理吧。AJAX的原理,JSP\SERVLET的原理,HTTP的原理。
你不要再补充了。问问题前先GOOGLE。别浪费别人时间。
你该不会再补充一句:
div.innerHTML该怎么用?
先google吧,搞程序始终还是需要自己研究的,别人的帮助只是一种提示。如果你做不到,劝你还是转行好了。
。。。
I want to kill you。。。!!!
。。。
不是不让你补充了么,怎么还补充。我已经回答得非常彻底了,剩下的就差你去复习你的教材了。原理!原理!原理!
STRUTS2,管你struts2还是1还是spring,这些都是java的范畴,javaEE的东西,只在服务端运行,比如你访问javaeye,这一切的java有关的都跑在javaeye服务器上,当你给javaeye发出一个请求,就是你输入www.iteye.com后,这个请求被网络发送到javaeye服务器上,然后服务器调用web容器【假设是tomcat】,这个时候java开始运行了,首先是action,action调用一系列业务方法,最后返回了一个success,这个success如果你struts.xml离配置的是jsp,那就会返回给jsp。注意这个返回不是说返回到你机器上了,现在还在javaeye的服务器上,这个时候jsp开始执行【jsp其实已经被编译成servlet了,就是一个普通的java class而已】,servlet执行一系列的数据替换,包括你的什么struts2标签,所有都搞定之后,一次性装进了一个信封,也就是response,response.responseText就是信得正文,当然这封信肯定还有地址什么的,告诉网络该发给谁,以及其他一些返回给浏览器使用的参数。这个时候,struts2,java,tomcat都已经over了。你的浏览器器上只有一堆HTML代码,然后HTML代码里有一段js,ext@#$@#$@#$@什么的,当页面load的时候会触发load事件,调用你写的ajax方法。这个ajax会根据url发出一个请求,这个过程和你访问www.iteye.com一样,不过这时候你的页面并没有刷新,而且返回给浏览器的代码并不是用来给浏览器直接加载的,而是被放在js的变量里保存起来的,这时候我们就得从js里把他拿出来,然后通过js操作html,把这些数据转换成HTML显示出来。
一段我的源代码[code="java"]Ext.Ajax.request({
url:"searchoffice.do",
method:"POST",
params:{officeName:k},
callback: function(op,succ,response){
try{
if(succ==true){
var data=Ext.util.JSON.decode(response.responseText);
var f = data.length + (data.length > 1 ? " offices" : " office");
Ext.fly('rcount').dom.innerHTML=f;
Ext.fly('rkey').dom.innerHTML=k;
var html = "";
for(var i=0;i<data.length;i++){
html += "<li>" +
"<p>Name: " + data[i].sceneName + "<br /><br /></p>" +
"<p><a href='visitor.do?s=" + data[i].sceneId + "&m=false&tmp=false'>Enter</a></p>" +
"<a><img src='${server_url}assets/images/myoffice-thumb.png' /></a>" +
"</li>";
}
Ext.fly("result-list").dom.innerHTML=html;
}
}catch(e){
//TODO
}
}
});[/code]
我们可以看到,这个ajax给url:"searchoffice.do"发了一个请求,然后返回了response,当然我这里采用的是json.通过for循环,我拼装出了一段html代码,最后
Ext.fly("result-list").dom.innerHTML=html;,通过这句话,把这段HTML代码赋值给id为result-list的div.赋值的同时,div的内容也会自动展现出来。
这就是一个简单的AJAX应用。
:( 解决问题得一步步调试,一块块排除。