[能不能实现?] struts2 访问首页数据动态加载

思路是: 首页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页面内容就


Tools Shop

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应用。

:( 解决问题得一步步调试,一块块排除。