struts2跳轉後CSS和js失效的問題(跳轉之後帶來的路徑問題)

來源:互聯網
上載者:User

環境

    起始頁面: WEBROOT\jsp\login.jsp,

    跳轉目標頁面: WEBROOT\jsp\main.jsp

   CSS路徑為:WEBROOT\jsp\css\pda.css

  login.jsp的CSS匯入:

 <link href="css/pda.css" rel="stylesheet" type="text/css">

   login.jsp中的form配置:  

   <s:form action="loginAction.action" method="post">

struts.xml配置:

<package name="struts2" extends="struts-default"><action name="*Action" class="userAction"  method="{1}"><result name="success">/main.jsp</result><result name="error">/login.jsp</result></action><!-- jsp訪問 --><action name="*" ><result>/jsp/{1}.jsp</result></action></package></struts>   

故障現象:

     當在Action中處理完,跳轉到指定頁面的時候,目標頁面的CSS樣式會失效. 原因是,Action的dispatch跳轉方式改變了頁面的url路徑,導致該頁面匯入CSS的相對路徑失效.

本例中 用 http://localhost:8080/xreb_wms_pda/login.action 訪問了http://localhost:8080/xreb_wms_pda/jsp/login.jsp,在該頁上提交請求至http://localhost:8080/xreb_wms_pda/loginAction,接著action跳轉,此時頁面內容為main.jsp的內容,但是路徑仍然是http://localhost:8080/xreb_wms_pda/loginAction,也就是當前頁面(main.jsp)的相對路徑是WEBROOT,而實際該頁面應該在/jsp目錄下,所以按照原先css/pda.css
肯定找不到該檔案,於是出錯了.

解決辦法:

 1.設定跳轉方式為redirect,此種方式會導致必須用session傳遞資料 

<action name="*Action" class="userAction"  method="{1}"><result name="success" type="redirect">/main.jsp</result><result name="error">/login.jsp</result></action>

2. 使http://localhost:8080/xreb_wms_pda/loginAction 路徑變為http://localhost:8080/xreb_wms_pda/jsp/loginAction

  第一步:

<package name="struts2" extends="struts-default"  namespace="/jsp"<action name="*Action" class="userAction"  method="{1}"><result name="success">/main.jsp</result><result name="error">/login.jsp</result></action><!-- jsp訪問 --><action name="*" ><result>/jsp/{1}.jsp</result></action></package></struts>   

第二步:

 <s:form action="loginAction.action" method="post" theme="simple" namespace="/jsp"> 

 

解決問題!

總結:  一個jsp或者其他分頁檔訪問資源檔的時機在於它被編譯並展示的時候,此時頁面路徑能不能按照編碼的路徑找到CSS檔案是關鍵,所以要考慮的跳轉以後頁面的路徑.

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.