对SSI框架，Struts2页面标签以及JQuery表单提交的分析
1.首先先从前台jsp页面代码开始分析
View Code
<%@ page language="java" pageEncoding="UTF-8"%> <%@taglib prefix="s" uri="/struts-tags"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="http://www.cnblogs.com/../css/inchcms_style.css" rel="stylesheet" type="text/css" /> <link href="http://www.cnblogs.com/../css/combo/css/main.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://www.cnblogs.com/../js/combo/js/jquery-ui-1.8.2.custom/js/jquery-1.4.2.min.js"></script> </head> <script type="text/javascript"> $(function() { $("#infofa") .click( function() { var url = "http://www.cnblogs.com/../pana/portal/infochannel/infofaadd.do?detailid=" + $("#detailid").val() + "&infocategoryId=" + $("#infocategoryId").val(); var params = $("#addForm").serialize(); $.post(url, function(data) { if (data == "0") { alert("<s:text name="infozxdetail.jsp.00170.27.1"/>"); } if (data == "1") { alert("<s:text name="infozxdetail.jsp.00170.30.2"/>"); } if (data == "2") { alert("<s:text name="infozxdetail.jsp.00170.33.3"/>"); } }, "json"); }); }); </script> <body> <input type="hidden" id="detailid" value='<s:property value="infodetail.id" />' /> <table width="80%" border="0" align="center"> <tr height="65px"> <td align="center" colspan="2"> <br /> <span class="detailtitle">[<s:property value="cname" />]<s:property value="infodetail.title" /> </span> </td> </tr> <tr height="20px"> <td align="center" colspan="2"> <s:text name="infozxdetail.jsp.00170.52.4"/> <s:property value="infodetail.author" /> <s:text name="infozxdetail.jsp.00170.54.5"/> <s:property value="chname" /> <!-- <s:text name="infozxdetail.jsp.00170.57.6"/><s:property value="cname" /> --> <s:date id="updatedate" name="infodetail.updatedate" format="yyyy-MM-dd" /> <s:text name="infozxdetail.jsp.00170.59.7"/> <s:property value="%{#updatedate}" /> <s:text name="infozxdetail.jsp.00170.59.79"/><s:property value="infodetail.browseCount" /> <a id="infofa" style="cursor: pointer;">[<s:text name="infozxdetail.jsp.00170.62.8"/>] <input type="hidden" id="infocategoryId" value='<s:property value="infocategoryId" />'> </a> </td> </tr> <tr height="5px"> <td align="center" colspan="2"> <hr size="1"> </td> </tr> <tr height="350px"> <td valign="top" colspan="2"> <s:property value="infodetail.contenttext" escape="false" /> </td> </tr> <tr height="5px"> <td align="center" colspan="2"> <hr size="1"> </td> </tr> <tr height="5px"> <td align="center" colspan="2"> </td> </tr> <tr align="left"> <td width="30%" valign="top"> <h5><img style="vertical-align: middle;" src="http://www.cnblogs.com/../demo/pages/pana/CMSImages/arrow.gif" width="13" height="13" /><s:text name="infozxdetail.jsp.00170.88.9"/></h5> <form id="voteidForm" method="post" action="infozxdetail.do?chname=<s:property value="chname" />&cname=<s:property value="cname" />"> <s:if test="vote==2"> <script type="text/javascript"> alert("<s:text name="infozxdetail.jsp.00170.93.10"/>"); </script> </s:if> <s:elseif test="vote==1"> <script type="text/javascript"> alert("<s:text name="infozxdetail.jsp.00170.98.11"/>"); </script> </s:elseif> <input type="hidden" name="voteType" value="1" /> <input type="hidden" name="detailid" value="<s:property value="detailid" />" /> <input type="hidden" name="infocategoryId" value="<s:property value="infocategoryId" />" /> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100" align="left"><s:text name="infozxdetail.jsp.00170.106.12"/></td> <td width="10"><input name="voteid" type="radio" value="1" checked="checked" style=""/></td> <td> <span title="<s:property value="v1" />%" style="width:98%;padding:1px;border:1px #000000 solid;text-align:left;"> <span style="width:<s:property value="v1" />%;background:#09F;"></span> </span> </td> <td width="20"><s:property value="infodetail.voteItm1" /></td> </tr> <tr> <td width="100" align="left"><s:text name="infozxdetail.jsp.00170.112.13"/></td> <td width="10"><input name="voteid" type="radio" value="2" /></td> <td> <span title="<s:property value="v2" />%" style="width:98%;padding:1px;border:1px #000000 solid;text-align:left;"> <span style="width:<s:property value="v2" />%;background:#09F;"></span> </span></td> <td width="20"><s:property value="infodetail.voteItm2" /></td> </tr> <tr> <td width="100" align="left"><s:text name="infozxdetail.jsp.00170.118.14"/></td> <td width="10"><input name="voteid" type="radio" value="3" /></td> <td> <span title="<s:property value="v3" />%" style="width:98%;padding:1px;border:1px #000000 solid;text-align:left;"> <span style="width:<s:property value="v3" />%;background:#09F;"></span> </span></td> <td width="20"><s:property value="infodetail.voteItm3" /></td> </tr> <tr> <td align="left" colspan="4"><br/><input type="submit" class="input02" value="<s:text name="infozxdetail.jsp.00170.124.15"/>" /></td> </tr> </table> </form> </td> <td width="70%" valign="top"> <h5><img style="vertical-align: middle;" src="http://www.cnblogs.com/../demo/pages/pana/CMSImages/arrow.gif" width="13" height="13" /><s:text name="infozxdetail.jsp.00170.132.16"/></h5> <form id="Comment" method="post" action="infozxdetail_goComment.do?detailid=<s:property value="infodetail.id" />&infocategoryId=<s:property value="infocategoryId" />&chname=<s:property value="chname" />&cname=<s:property value="cname" />" onsubmit="javascript:alert('<s:text name="infozxdetail.jsp.00170.135.17"/>');"> <textarea id="content" class="ip" style="width: 50%;" name="content" cols="45" rows="6"></textarea> <br/> <input type="submit" class="input02" value="<s:text name="infozxdetail.jsp.00170.138.18"/>" /> </form> </td> </tr> </table> <table width="80%" border="0" align="center"> <s:iterator value="listcomment"> <tr> <td style="background-color:#DDDDDD;"> <a href='javascript:void(0);' title="<s:property value='usrname'/>" onclick='parent.parent.add({id:"<s:property value="userLoginid"/>",name:"<s:property value='usrname'/>",title:"<s:property value='usrname'/>",url:"http://www.cnblogs.com/../pana/portal/search/detailEmp.do?empId=<s:property value="userLoginid"/>"});'> <s:property value="usrname" /></a> [ <s:date id="datetime" name="datetime" format="yyyy-MM-dd HH:mm:ss" /> <s:property value="%{#datetime}" /> ] </td> </tr> <tr> <td> <s:property value="content" /> <hr/> </td> </tr> </s:iterator> </table> </body> </html>
首先是引入标签
<%@ page language="java" pageEncoding="UTF-8"%> <%@taglib prefix="s" uri="/struts-tags"%>
基本的Struts标签
<s:property value="infodetail.author" /> //后台返回的infodetail对象author字段的显示 <s:property value="chname" />//后台返回的字段 <s:text name="infozxdetail.jsp.00170.112.13"/>//起显示文字的作用类是label <s:date id="updatedate" name="infodetail.updatedate" format="yyyy-MM-dd" /> //日期标签 //条件标签 <s:if test="vote==2"> <script type="text/javascript"> alert("<s:text name="infozxdetail.jsp.00170.93.10"/>"); </script> </s:if> <s:elseif test="vote==1"> <script type="text/javascript"> alert("<s:text name="infozxdetail.jsp.00170.98.11"/>"); </script> </s:elseif>
对返回的集合（或数组）可以采用iterator标签
如：后台action定义private List<Infocomments> listcomment;
<table width="80%" border="0" align="center"> <s:iterator value="listcomment"> <tr> <td style="background-color:#DDDDDD;"> <a href='javascript:void(0);' title="<s:property value='usrname'/>" onclick='parent.parent.add({id:"<s:property value="userLoginid"/>",name:"<s:property value='usrname'/>",title:"<s:property value='usrname'/>",url:"http://www.cnblogs.com/../pana/portal/search/detailEmp.do?empId=<s:property value="userLoginid"/>"});'> <s:property value="usrname" /></a> [ <s:date id="datetime" name="datetime" format="yyyy-MM-dd HH:mm:ss" /> <s:property value="%{#datetime}" /> ] </td> </tr> <tr> <td> <s:property value="content" /> <hr/> </td> </tr> </s:iterator> </table>
现在分析下JQuery的post提交方式
首先需要引入Jquery相关的js文件
<head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="http://www.cnblogs.com/../css/inchcms_style.css" rel="stylesheet" type="text/css" /> <link href="http://www.cnblogs.com/../css/combo/css/main.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://www.cnblogs.com/../js/combo/js/jquery-ui-1.8.2.custom/js/jquery-1.4.2.min.js"></script> </head>
具体调用方法
<script type="text/javascript"> $(function() { $("#infofa") //此处定义的是标签id<a id="infofa" style="cursor: pointer;">.........</a> .click( //点击事件 function() {
//参数的定义 var url = "http://www.cnblogs.com/../pana/portal/infochannel/infofaadd.do?detailid=" + $("#detailid").val() + "&infocategoryId=" + $("#infocategoryId").val();
//提交方式为post，data代表返回的值（返回的值为json数据格式） $.post(url, function(data) { if (data == "0") { alert("<s:text name="infozxdetail.jsp.00170.27.1"/>"); } if (data == "1") { alert("<s:text name="infozxdetail.jsp.00170.30.2"/>"); } if (data == "2") { alert("<s:text name="infozxdetail.jsp.00170.33.3"/>"); } }, "json"); }); }); </script>
对应的Struts标签定义如下
<package name="portalAjax" namespace="/pana/portal/infochannel" extends="json-default" > <!-- 信息收藏添加 --> <action name="infofaadd" class="infofaaddAction"> <result type="json"> <param name="root">resultFlag</param> </result> </action> </package>
对应的action部分代码
public String perform() throws SQLException { //Session中获得用户信息 String operateUser = getLoginIDInSession(); Infofavirate infofavirate=new Infofavirate(); infofavirate.setUserLoginid(operateUser); infofavirate.setInfodetailId(detailid); infofavirate.setInfocategoryId(infocategoryId); infofavirate.setCreator(operateUser); infofavirate.setCreatedate(formatService.getNowDate()); resultFlag=String.valueOf(infofavirateService.insertInfoFavirate(infofavirate)); return SUCCESS; }
