struts中的javascript

原创 2006年05月28日 14:34:00
上一篇文章中介绍校验时提到客户边的校验用到了JavaScript,实际上用Struts配合JavaScript还可以实现许多有用的功能,比如,级联下拉菜单的实现就是一个典型的例子:

本例假设要实现的是一个文章发布系统,我们要发布的文章分为新闻类和技术类,其中新闻类又分为时事新闻和行业动态;技术类又分为操作系统、数据库、和编程语言等,为了便于添加新的条目,所有这些都保存在数据库表中。

为此,我们建立一个名为articleClass的表和一个名为articleSubClass的表。

articleClass表的结构如下:
articleClassID字段:char类型,长度为2,主键
articleClassName字段:varchar类型,长度为20
articleSubClass表的结构如下:
articleClassID字段:char类型,长度为2
articleSubClassID字段:char类型,长度为2与articleClassID一起构成主键
articleSubClassName字段:varchar类型,长度为20


表建好后,在articleClass表中录入如下数据:如,01、新闻类;02、技术类

在articleSubClass表中录入:01、01、时事新闻;01、02、行业动态;02、01、操作系统等记录。到这里,数据库方面的准备工作就已做好。

有了前面做登录例子的基础,理解下面要进行的工作就没有什么难点了,我们现在的工作也在原来mystruts项目中进行。首先,建立需要用到的formbean即ArticleClassForm,其代码如下:

package entity;
import org.apache.struts.action.*;
import javax.servlet.http.*;
import java.util.Collection;

public class ArticleClassForm extends ActionForm {
  //为select的option做准备
  private Collection beanCollection;
  private String singleSelect = "";
  private String[] beanCollectionSelect = { "" };
  private String articleClassID;
  private String articleClassName;
  private String subI;//子类所在行数
  private String subJ;//子类所在列数
  private String articleSubClassID;
  private String articleSubClassName;

  public Collection getBeanCollection(){
    return beanCollection;
  }

  public void setBeanCollection(Collection beanCollection){
    this.beanCollection=beanCollection;
  }

  public String getSingleSelect() {
    return (this.singleSelect);
  }
  public void setSingleSelect(String singleSelect) {
    this.singleSelect = singleSelect;
  }
  public String[] getBeanCollectionSelect() {
    return (this.beanCollectionSelect);
  }
  public void setBeanCollectionSelect(String beanCollectionSelect[]) {
    this.beanCollectionSelect = beanCollectionSelect;
  }

  public String getArticleClassID() {
    return articleClassID;
  }
  public void setArticleClassID(String articleClassID) {
    this.articleClassID = articleClassID;
  }
  public String getArticleClassName() {
    return articleClassName;
  }
  public void setArticleClassName(String articleClassName) {
    this.articleClassName = articleClassName;
  }

  public String getSubI() {
    return subI;
  }
  public void setSubI(String subI) {
    this.subI = subI;
  }

  public String getSubJ() {
    return subJ;
  }
  public void setSubJ(String subJ) {
    this.subJ = subJ;
  }

  public String getArticleSubClassID() {
    return articleSubClassID;
  }
  public void setArticleSubClassID(String articleSubClassID) {
    this.articleSubClassID = articleSubClassID;
  }

  public String getArticleSubClassName() {
    return articleSubClassName;
  }
  public void setArticleSubClassName(String articleSubClassName) {
    this.articleSubClassName = articleSubClassName;
  }
}


将它放在包entity中。其次,我们的系统要访问数据库,因此也要建立相应的数据库访问对象ArticleClassDao,其代码如下:

package db;

import entity.ArticleClassForm;
import db.*;
import java.sql.*;

import java.util.Collection;
import java.util.ArrayList;
import org.apache.struts.util.LabelValueBean;
public class ArticleClassDao {
  private Connection con;

  public ArticleClassDao(Connection con) {
    this.con=con;
  }
  public Collection findInUseForSelect(){
    PreparedStatement ps=null;
    ResultSet rs=null;
    ArrayList list=new ArrayList();
    String sql="select * from articleClass order by articleClassID";
    try{
      if(con.isClosed()){
        throw new IllegalStateException("error.unexpected");
      }
      ps=con.prepareStatement(sql);
      rs=ps.executeQuery();

      while(rs.next()){
        String value=rs.getString("articleClassID");
        String label=rs.getString("articleClassName");
        list.add(new LabelValueBean(label,value));
      }
      return list;
    }
    catch(SQLException e){
      e.printStackTrace();
      throw new RuntimeException("error.unexpected");
    }
    finally{
      try{
        if(ps!=null)
          ps.close();
        if(rs!=null)
          rs.close();

      }
      catch(SQLException e){
        e.printStackTrace();
        throw new RuntimeException("error.unexpected");
      }
    }
  }

  public Collection findInUseForSubSelect(){
    PreparedStatement ps=null;
    ResultSet rs=null;
    PreparedStatement psSub=null;
    ResultSet rsSub=null;
    int i=0;//大类记数器
    int j=0;//小类记数器
    String classID="";
    String subClassID="";
    String subClassName="";

    ArrayList list=new ArrayList();
    ArticleClassForm articleClassForm;


    String sql="select * from articleClass order by articleClassID";
    try{
      if(con.isClosed()){
        throw new IllegalStateException("error.unexpected");
      }
      ps=con.prepareStatement(sql);
      rs=ps.executeQuery();

      while(rs.next()){
        i++;
        classID=rs.getString("articleClassID");
        String sqlSub="select * from articleSubClass where articleClassID=? 
            order by articleSubClassID";
        psSub=con.prepareStatement(sqlSub);
        psSub.setString(1,classID);
        rsSub=psSub.executeQuery();

        articleClassForm=new ArticleClassForm();
        articleClassForm.setSubI(""+i);
        articleClassForm.setSubJ(""+j);
        articleClassForm.setArticleSubClassID("请输入一个小类");
        articleClassForm.setArticleSubClassName("请输入一个小类");
        list.add(articleClassForm);

        while(rsSub.next()){
          subClassID=rsSub.getString("articleSubClassID");
          subClassName=rsSub.getString("articleSubClassName");
          j++;
          //optionStr="articleSubClassGroup[" + i + "][" + j + "]=
new Option('"+ subClassName +"','"+ subClassID+ "')";
          articleClassForm=new ArticleClassForm();
          articleClassForm.setSubI(""+i);
          articleClassForm.setSubJ(""+j);
          articleClassForm.setArticleSubClassID(subClassID);
          articleClassForm.setArticleSubClassName(subClassName);
          list.add(articleClassForm);
        }

        j=0;
      }
      return list;
    }
    catch(SQLException e){
      e.printStackTrace();
      throw new RuntimeException("error.unexpected");
    }
    finally{
      try{
        if(ps!=null)
          ps.close();
        if(rs!=null)
          rs.close();

      }
      catch(SQLException e){
        e.printStackTrace();
        throw new RuntimeException("error.unexpected");
      }
    }
  }
}


将它保存在db目录中。它们的目的是将文章的类和子类信息从数据库表中读出,以一定的格式保存在集合对象中以供页面显示。

再次,我们要建立相应的jsp文件,文件名为selectArticleClass.jsp,代码如下:

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<html>
<head>
<title>
选择文件类别
</title>
</head>
<body bgcolor="#ffffff">
<h3>
选择文件所属类型
</h3>
<html:errors/>
<table width="500" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><html:form name="articleClassForm" type="entity.ArticleClassForm"
      action="selectArticleClassAction.do">
        <table width="500" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td align="right">文章大类*</td>
            <td>
              <html:select property="articleClassID" styleClass="word"
                   onchange="articleClassFormredirect(this.options.selectedIndex)">
                <html:option value="">请选择一个大类</html:option>
                <html:optionsCollection name="articleClassForm" property="beanCollection" styleClass="word"/>
              </html:select>
            </td>
          </tr>
          <tr>
            <td align="right">文章小类*</td>
            <td>
              <select name="articleSubClassID" Class="word" >
                <option value="">请选择一个小类</option>
              </select>
              <SCRIPT language=JavaScript>
              <!--
              var articleSubClassGroups=document.articleClassForm.articleClassID.
                   options.length
              var articleSubClassGroup=new Array(articleSubClassGroups)
              for (i=0; i<articleSubClassGroups; i++)
              articleSubClassGroup[i]=new Array()
              <logic:iterate name="articleSubClassList" id="articleClassForm"
                    scope="request" type="entity.ArticleClassForm">
                articleSubClassGroup[<bean:write name="articleClassForm"
                        property="subI"/>][<bean:write name="articleClassForm"
                        property="subJ"/>]=new Option("<bean:write name="articleClassForm"
                  property="articleSubClassName"/>","<bean:write name="articleClassForm"
                  property="articleSubClassID"/>")
              </logic:iterate>
              var articleSubClassTemp=document.articleClassForm.articleSubClassID
              function articleClassFormredirect(x){
                for (m=articleSubClassTemp.options.length-1;m>0;m--)
                articleSubClassTemp.options[m]=null
                for (i=0;i<articleSubClassGroup[x].length;i++){
                  articleSubClassTemp.options[i]=new
            Option(articleSubClassGroup[x][i].text,
                   articleSubClassGroup[x][i].value)
                }
                articleSubClassTemp.options[0].selected=true
              }
             //-->
           </SCRIPT>
            </td>
          </tr>
        </table>
      </html:form>
    </td>
  </tr>
</table>
</body>
</html>


这里值得重点关注的是其中的JavaScript代码,有兴趣的可以仔细分析一下它们是怎样配合集合中的元素来实现级联选择的。

最后,为了例子的完整。我们将涉及到action代码和必要的配置代码在下面列出:其中,action的文件名为SelectArticleClassAction.java,代码如下:

package action;
import entity.*;
import org.apache.struts.action.*;
import javax.servlet.http.*;
import javax.sql.DataSource;
import java.sql.Connection;
import db.ArticleClassDao;
import java.util.Collection;
import java.sql.SQLException;
public class SelectArticleClassAction extends Action {
  public ActionForward execute(ActionMapping actionMapping, ActionForm actionForm,
  HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) {
    /**@todo: complete the business logic here, this is just a skeleton.*/
    ArticleClassForm articleClassForm = (ArticleClassForm) actionForm;
    DataSource dataSource;
    Connection cnn=null;
    ActionErrors errors=new ActionErrors();
    try{
      dataSource = getDataSource(httpServletRequest,"A");
      cnn = dataSource.getConnection();
      ArticleClassDao articleClassDao=new ArticleClassDao(cnn);

      Collection col=articleClassDao.findInUseForSelect();
      articleClassForm.setBeanCollection(col);
      httpServletRequest.setAttribute("articleClassList",col);

      //处理子类选项
      Collection subCol=articleClassDao.findInUseForSubSelect();
      httpServletRequest.setAttribute("articleSubClassList",subCol);
      return actionMapping.findForward("success");
    }
    catch(Throwable e){
      e.printStackTrace();
      //throw new RuntimeException("未能与数据库连接");
      ActionError error=new ActionError(e.getMessage());
      errors.add(ActionErrors.GLOBAL_ERROR,error);
    }
    finally{
      try{
        if(cnn!=null)
          cnn.close();
      }
      catch(SQLException e){
        throw new RuntimeException(e.getMessage());
      }
    }
    saveErrors(httpServletRequest,errors);
    return actionMapping.findForward("fail");
  }
}


将其保存在action目录中。

在struts-config.xml文件中做如下配置:

<form-beans>
中加入
<form-bean name="articleClassForm" type="entity.ArticleClassForm" />


><action-mappings>
中加入:

<action name="articleClassForm" path="/selectArticleClassAction" scope="session"
      type="action.SelectArticleClassAction" validate="false">
<forward name="success" path="/selectArticleClass.jsp" />
<forward name="fail" path="/genericError.jsp" />
</action>


为了对应配置中的
<forward name="fail" path="/genericError.jsp" />
,我们还要提供一个显示错误信息的jsp页面,其代码如下:

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<html>
<head>
<title>
genericError
</title>
<link href="css/mycss.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#ffffff">
<html:errors/>
</body>
</html>


现在一切就绪,可以编译执行了。在浏览器中输入:http://127.0.0.1:8080/mystruts/selectArticleClassAction.do就可以看到该例子的运行结果了。(
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

struts2下,jsp视图页面中CSS和javascript引用相对路径和绝对路径问题。

在Struts2的实际使用中,经常会在jsp视图页面中引入CSS和javascript,这就涉及到引用路径问题。路径有两种,一种是相对路径,另一种是绝对路径。我们分别来说说在Struts2的页面视图中...
  • xxfigo
  • xxfigo
  • 2012-02-27 11:24
  • 12672

JavaScript手册 Struts 2.0 API

  • 2012-01-30 20:10
  • 47.31MB
  • 下载

JavaScript和Struts2动态添加图片

JavaScript源码 功能:根据跳转链接monitor/alertdata.do链接,获取后台数据并将数据结果保存在dat变量中 根据dat变量中的alarm的值,确定需要加载的图片的链接 ...

使用Struts2+JavaScript+Ajax实现成绩录入功能

基本需求:使用Struts2框架成绩录入功能。画面概要:(如图示) 数据库表格 (tbl_scoreinfo): 姓名 Username Varchar2(20)   ...

Struts2中Ajax的使用(Javascript实现)

Struts2中Ajax的使用(Javascript实现) 描述:实现在输入框中输入信息时动态提示(模仿百度或谷歌的页面效果)。 注意:服务器端提示信息以XML格式返回。 1. 页面效果 ...

jsp脚本、jsp声明、jsp输出表达式、javascript、jsp标签、struts2标签

1. 先界定一下题目中概念。 (1)jsp脚本:有的地方也叫java脚本,指用     %>括起来的jsp页面中的java脚本。所有能在java程序中执行的代码,都可以通过jsp脚本执行。 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)