struts2.18整合json和ExtJs4.0实例

来源:互联网 发布:sql中replace判断空值 编辑:程序博客网 时间:2024/05/22 15:29

用到的jar包有:

commons-beanutils-1.7.0.jar、commons-collections-3.2.jar、commons-fileupload-1.2.1.jar、commons-io-1.3.2.jar、commons-lang-2.3.jar、commons-logging-1.0.4.jar、freemarker-2.3.15.jar、json-lib-2.1.jar、ognl-2.7.3.jar、struts2-core-2.1.8.1.jar、struts2-json-plugin-2.1.8.1.jar、xwork-core-2.1.6.jar

这些包在struts2.1.8的lib文件夹中都有,还需要加上一个ezmorph-1.0.4.jar,本实例中没有用到jsonplugin-0.33.jar包。

一、首先写一个javabean:Person.java

 

Java代码 复制代码 收藏代码
  1. package com.leo.bean;   
  2.   
  3. public class Person {   
  4.     private String name;   
  5.     private int age;   
  6.     private String sex;   
  7.     private String birthday;   
  8.   
  9.     public Person(String name, int age, String sex, String birthday) {   
  10.         super();   
  11.         this.name = name;   
  12.         this.age = age;   
  13.         this.sex = sex;   
  14.         this.birthday = birthday;   
  15.     }   
  16.   
  17.     public String getName() {   
  18.         return name;   
  19.     }   
  20.   
  21.     public void setName(String name) {   
  22.         this.name = name;   
  23.     }   
  24.   
  25.     public int getAge() {   
  26.         return age;   
  27.     }   
  28.   
  29.     public void setAge(int age) {   
  30.         this.age = age;   
  31.     }   
  32.   
  33.     public String getSex() {   
  34.         return sex;   
  35.     }   
  36.   
  37.     public void setSex(String sex) {   
  38.         this.sex = sex;   
  39.     }   
  40.   
  41.     public String getBirthday() {   
  42.         return birthday;   
  43.     }   
  44.   
  45.     public void setBirthday(String birthday) {   
  46.         this.birthday = birthday;   
  47.     }   
  48.   
  49. }  

 

 二、写Action:ExtjsAction.java

 

Java代码 复制代码 收藏代码
  1. package com.leo.action;   
  2.   
  3. import java.util.ArrayList;   
  4. import java.util.List;   
  5.   
  6. import com.leo.bean.Person;   
  7. import com.opensymphony.xwork2.ActionSupport;   
  8.   
  9. public class ExtjsAction extends ActionSupport {   
  10.     private long results;   
  11.     private List items;   
  12.   
  13.     public long getResults() {   
  14.         return results;   
  15.     }   
  16.   
  17.     public void setResults(long results) {   
  18.         this.results = results;   
  19.     }   
  20.   
  21.     public List getItems() {   
  22.         return items;   
  23.     }   
  24.   
  25.     public void setItems(List items) {   
  26.         this.items = items;   
  27.     }   
  28.   
  29.     public String execute() throws Exception {   
  30.         this.results = 3;   
  31.         Person p1 = new Person("张三"29"男""1990-10-22");   
  32.         Person p2 = new Person("李四"28"男""1991-03-30");   
  33.         Person p3 = new Person("王五"27"女""1993-08-17");   
  34.         this.items = new ArrayList<Person>();   
  35.         this.items.add(p1);   
  36.         this.items.add(p2);   
  37.         this.items.add(p3);   
  38.         return SUCCESS;   
  39.     }   
  40. }  

 

 三、写配置文件

1.web.xml

 

Xml代码 复制代码 收藏代码
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
  3.     xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"  
  4.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"  
  5.     version="2.5">  
  6.     <display-name>struts2</display-name>  
  7.     <welcome-file-list>  
  8.         <welcome-file>index.jsp</welcome-file>  
  9.     </welcome-file-list>  
  10.     <filter>  
  11.         <filter-name>struts2</filter-name>  
  12.         <filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>  
  13.     </filter>  
  14.     <filter-mapping>  
  15.         <filter-name>struts2</filter-name>  
  16.         <url-pattern>/*</url-pattern>  
  17.     </filter-mapping>  
  18. </web-app>  

 

 2.struts.xml

 

Xml代码 复制代码 收藏代码
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN"    
  3. "http://struts.apache.org/dtds/struts-2.1.dtd">  
  4. <struts>  
  5.     <include file="struts-default.xml" />  
  6.     <package name="json" namespace="/" extends="json-default">  
  7.         <action name="extjs" class="com.leo.action.ExtjsAction">  
  8.             <result type="json"></result>  
  9.         </action>  
  10.     </package>  
  11. </struts>      

 

 四、最后写jsp

index.jsp

 

Html代码 复制代码 收藏代码
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  3. <html>  
  4.     <head>  
  5.   
  6.         <title>ExtJs与Struts2结合</title>  
  7.         <meta http-equiv="pragma" content="no-cache">  
  8.         <meta http-equiv="cache-control" content="no-cache">  
  9.         <meta http-equiv="expires" content="0">  
  10.         <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  11.         <meta http-equiv="description" content="This is my page">  
  12.         <link rel="stylesheet" type="text/css"  
  13.             href="../../ext-4.0.7/resources/css/ext-all.css" />  
  14.         <script type="text/javascript" src="../../ext-4.0.7/bootstrap.js"></script>  
  15.         <script type="text/javascript"  
  16.             src="../../ext-4.0.7/locale/ext-lang-zh_CN.js"></script>  
  17.         <script type="text/javascript">  
  18.     Ext.onReady(function() {   
  19.         Ext.create('Ext.grid.Panel', {   
  20.             title : '人员列表',   
  21.             renderTo : Ext.getBody(),   
  22.             width : 400,   
  23.             height : 170,   
  24.             frame : true,   
  25.             store : {   
  26.                 fields : [ 'name', 'age', 'sex', 'birthday' ],   
  27.                 proxy : {   
  28.                     type : 'ajax',   
  29.                     url : '/s2json/extjs.action',   
  30.                     reader : {   
  31.                         type : 'json',   
  32.                         root : 'items'   
  33.                     }   
  34.                 },   
  35.                 autoLoad : true   
  36.             },   
  37.             columns : [ new Ext.grid.RowNumberer(), {   
  38.                 header : "姓名",   
  39.                 width : 80,   
  40.                 dataIndex : 'name',   
  41.                 sortable : true   
  42.             }, {   
  43.                 header : "年龄",   
  44.                 width : 80,   
  45.                 dataIndex : 'age',   
  46.                 sortable : true   
  47.             }, {   
  48.                 header : "性别",   
  49.                 width : 80,   
  50.                 dataIndex : 'sex',   
  51.                 sortable : true   
  52.             }, {   
  53.                 header : "生日",   
  54.                 width : 80,   
  55.                 dataIndex : 'birthday',   
  56.                 sortable : true   
  57.             } ]   
  58.         });   
  59.     });   
  60. </script>  
  61.     </head>  
  62.     <body>  
  63.     </body>  
  64. </html>  

 

 

五、效果图