struts2+jQuery+ajax调用演示

 

来自:http://blog.csdn.net/thinkscape/article/details/7467153

环境:

操作系统:Windows 7 

应用程序服务器:apache-tomcat-7.0.11

开发工具:IntelliJ IDEA 11.1.1

Java版本:Java(TM) SE Runtime Environment (build 1.7.0_03-b05)

Struts版本:struts-2.2.1.1

jQuery版本:1.7.2

MySql版本: 5.5.16 MySQL Community Server (GPL)

mysql-connector-java:5.1.15

 

2013年4月16日注:本例中采用的JSON数据格式,推荐使用性能更好的jackson进行序列化,不要使用json-lib

 

关键点:

1.引入包:struts2对数据进行json序列化,必须要用到struts2的json-lib,struts2-json-plugin包;

2.json数据处理:异步提交的数据采用json格式,struts2-json-plugin会对数据进行json处理,所以struts2配置文件struts.xml中的package节点的extends必须是:extends="json-default";

例如:<package name="default" namespace="/test" extends="json-default">

3.同样的由于返回的是json数据,所以result的类型也必须采用json;

注意:struts2只能在引入json-lib,struts2-json-plugin包时,result的type属性设定json才不会报错:<result name="userInfo" type="json"></result>

4.针对异步提交,action的result节点值应该为空,即不能再转向(例如:只能为<result name="userInfo" type="json"></result>);

 

时序:

绿色代表客户端请求;紫色代表从数据库返回到客户端。

jsp-----(表单提交)---->jQuery------(ajax异步)----->Struts2-----(action取得json数据)----->调用service------->其它(spring,hibernate等)-----(model)----->DB

DB----(model)------>hibernate,spring--------->service-------Struts2(action,result)------->jQuery(ajax)---------->jsp

 

代码:

1. 入口jsp:input_user.jsp

 

[csharp] view plaincopy
 
  1. <%--  
  2.   Created by IntelliJ IDEA.  
  3.   User: Anyx  
  4.   Date: 12-4-15  
  5.   Time: 下午3:46  
  6.   To change this template use File | Settings | File Templates.  
  7. --%>  
  8. <%@ page contentType="text/html;charset=UTF-8" language="java" %>  
  9. <html>  
  10. <head>  
  11.     <title></title>  
  12.     <script type="text/javascript" src="/js/jquery-1.7.2.js"></script>  
  13.     <script type="text/javascript" src="/js/myJs.js"></script>  
  14. </head>  
  15. <body>  
  16.     <div>  
  17.         请输入用户:  
  18.     </div>  
  19.     <div>  
  20.         <form id="subUserForm">  
  21.         <input type="text" name="userInfo.id" id="id"/>  
  22.         <input type="text" name="userInfo.name" id="name"/>  
  23.         </form>  
  24.     </div>  
  25.     <div>  
  26.         <input id="addUser" type="button" value="添加"/>  
  27.          <input id="users" type="button" value="所有用户"/>  
  28.          <a href="/test/load_allUser_jump.action">所有用户:非异步方式</a>  
  29.          <input id="msg" type="button" value="hello"/>  
  30.          <input id="msgUserInfo" type="button" value="userInfo"/>  
  31.          <input id="msgUserInfoList" type="button" value="userInfoList"/>  
  32.     </div>  
  33. <div id="allUser">  
  34. input_user:  
  35. </div>  
  36. </body>  
  37. </html>  


2. jQuery文件:myJs.js

 

 

[javascript] view plaincopy
 
  1. $(document).ready(function () {  
  2.     $("#msg").click(function () {  
  3.         $.ajax({  
  4.             url:‘/test/input_user!queryHello‘,  
  5.             type:‘POST‘,  
  6.             data:"{}",  
  7.             dataType:‘json‘,  
  8.             success:function (data) {  
  9.                 $("#allUser").append("输出了:id:" + data.hello);  
  10.             }  
  11.         });  
  12.         /*$.getJSON("/test/input_user!queryHello", function (data) { 
  13.          //通过.操作符可以从data.hello中获得Action中hello的值 
  14.          $("#allUser").html("输出了: " + data.hello); 
  15.          });*/  
  16.     });  
  17.   
  18.     $("#msgUserInfo").click(function () {  
  19.         $.ajax({  
  20.             url:‘/test/userInfo!loadUserInfo‘,  
  21.             type:‘post‘,  
  22.             data:"{}",  
  23.             dataType:‘json‘,  
  24.             success:function (data) {  
  25.                 $("#allUser").append("<div>输出了:id:" + data.userInfo.id + ", name: " + data.userInfo.name + "</div>");  
  26.             }  
  27.         });  
  28.     });  
  29.   
  30.     $("#msgUserInfoList").click(function () {  
  31.         $.ajax({  
  32.             url:‘/test/userInfoList.action‘,  
  33.             type:‘post‘,  
  34.             data:"{}",  
  35.             dataType:‘json‘,  
  36.             success:function (data) {  
  37.                 /*$.each(data.userList, function(i, value){ 
  38.                  $("#allUser").append("<div>输出了:id:"+value.id+", name: "+value.name+"</div>"); 
  39.                  });*/  
  40.                 $(data.userList).each(function (i, value) {  
  41.                     $("#allUser").append("<div>输出了:id:" + value.id + ", name: " + value.name + "</div>");  
  42.                 });  
  43.   
  44.             }  
  45.         });  
  46.     });  
  47.   
  48.     $("#addUser").click(function () {  
  49.         //必须先对提交表单数据数据进行序列化,采用jQuery的serialize()方法  
  50.         var params = $("#subUserForm").serialize();  
  51.         $.ajax({  
  52.             url:‘/test/add_user.action‘,  
  53.             type:‘post‘,  
  54.             data:params,  
  55.             dataType:‘json‘,  
  56.             success:function (data) {  
  57.                 /*$.each(data.userList, function(i, value){ 
  58.                  $("#allUser").append("<div>输出了:id:"+value.id+", name: "+value.name+"</div>"); 
  59.                  });*/  
  60.                 $(data.userList).each(function (i, value) {  
  61.                     $("#allUser").append("<div>输出了:id:" + value.id + ", name: " + value.name + "</div>");  
  62.                 });  
  63.   
  64.             }  
  65.         });  
  66.     });  
  67.   
  68.     $("#users").click(function () {  
  69.         $.ajax({  
  70.             url:‘/test/load_allUser.action‘,  
  71.             type:‘post‘,  
  72.             data:"{}",  
  73.             dataType:‘json‘,  
  74.             success:function (data) {  
  75.                 /*$.each(data.userList, function (i, value) { 
  76.                  $("#allUser").append("<div>输出了:id:" + value.id + ", name: " + value.name + "</div>"); 
  77.                  });*/  
  78.                 $(data.userList).each(function (i, value) {  
  79.                     $("#allUser").append("<div>输出了:id:" + value.id + ", name: " + value.name + "</div>");  
  80.                 });  
  81.   
  82.             }  
  83.         });  
  84.     });  
  85. });  


3.action类:UserAction.java

 

 

[java] view plaincopy
 
  1. public class UserAction extends ActionSupport {  
  2.   
  3.     UserService us = new UserService();  
  4.   
  5.     public String inputUser() {  
  6.         return "INPUT_USER";  
  7.     }  
  8.   
  9.     public String queryHello() {  
  10.         this.hello = "hello world";  
  11.         return "hel";  
  12.     }  
  13.   
  14.     public String loadUserInfo() {  
  15.         userInfo = new UserInfo();  
  16.         userInfo.setId(3);  
  17.         userInfo.setName("取得userInfo");  
  18.         return "userInfo";  
  19.     }  
  20.   
  21.     public String loadUserInfoList() {  
  22.         userList = new ArrayList<UserInfo>();  
  23.   
  24.         UserInfo u1 = new UserInfo();  
  25.         u1.setId(1);  
  26.         u1.setName("取得userInfo1");  
  27.   
  28.         UserInfo u2 = new UserInfo();  
  29.         u2.setId(2);  
  30.         u2.setName("取得userInfo2");  
  31.   
  32.         UserInfo u3 = new UserInfo();  
  33.         u3.setId(3);  
  34.         u3.setName("取得userInfo3");  
  35.   
  36.         userList.add(u1);  
  37.         userList.add(u2);  
  38.         userList.add(u3);  
  39.         return "userInfoList";  
  40.     }  
  41.   
  42.   
  43.     public String addUser() {  
  44.         /*userInfo = new UserInfo(); 
  45.         userInfo.setId(7); 
  46.         userInfo.setName("张7");*/  
  47.   
  48.         //如果是异步提交json格式,必须先在js中对提交的表单form进行序列化  
  49.         //var params = $("subUserForm").serialize();  
  50.         us.addUser(userInfo);  
  51.   
  52.         userList = us.getUser();  
  53.         return "ADD_SUCCESS";  
  54.     }  
  55.   
  56.     public String loadAllUser() {  
  57.   
  58.         userList = us.getUser();  
  59.   
  60.         return "USER";  
  61.     }  
  62.   
  63.     /////////////////  
  64.     private String hello;  
  65.   
  66.     public String getHello() {  
  67.         return hello;  
  68.     }  
  69.   
  70.     public void setHello(String hello) {  
  71.         this.hello = hello;  
  72.     }  
  73.   
  74.     public List<UserInfo> getUserList() {  
  75.         return userList;  
  76.     }  
  77.   
  78.     public void setUserList(List<UserInfo> userList) {  
  79.         this.userList = userList;  
  80.     }  
  81.   
  82.     public UserInfo getUserInfo() {  
  83.         return userInfo;  
  84.     }  
  85.   
  86.     public void setUserInfo(UserInfo userInfo) {  
  87.         this.userInfo = userInfo;  
  88.     }  
  89.   
  90.     private UserInfo userInfo;  
  91.     private List<UserInfo> userList;  
  92. }  

 

4.Struts配置文件:struts.xml

 

[html] view plaincopy
 
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2.   
  3. <!DOCTYPE struts PUBLIC  
  4.         "-//Apache Software Foundation//DTD Struts Configuration 2.1.7//EN"  
  5.         "http://struts.apache.org/dtds/struts-2.1.7.dtd">  
  6.   
  7. <struts>  
  8.     <!--struts2的开发模式-->  
  9.     <constant name="struts.devMode" value="true"/>  
  10.   
  11.     <!--采用json数据格式,package的extends必须是extends="json-default"-->  
  12.     <!--并且必须要用到struts2的json-lib,struts2-json-plugin包-->  
  13.     <!--采用异步提交方式,result的type="json",并且result节点值为空-->  
  14.     <package name="default" namespace="/test" extends="json-default">  
  15.         <!--客户端请求采用DMI(动态调用)-->  
  16.         <action name="input_user" class="com.agcro.jquery.action.UserAction">  
  17.             <result name="INPUT_USER">/input_user.jsp</result>  
  18.             <result name="hel" type="json"></result>  
  19.         </action>  
  20.   
  21.         <!--客户端请求(非动态调用)-->  
  22.         <action name="userInfo" class="com.agcro.jquery.action.UserAction" method="loadUserInfo">  
  23.             <result name="userInfo" type="json"></result>  
  24.         </action>  
  25.   
  26.         <action name="userInfoList" class="com.agcro.jquery.action.UserAction" method="loadUserInfoList">  
  27.             <result name="userInfoList" type="json"></result>  
  28.         </action>  
  29.   
  30.   
  31.         <action name="add_user" class="com.agcro.jquery.action.UserAction" method="addUser">  
  32.             <result name="ADD_SUCCESS" type="json"></result>  
  33.         </action>  
  34.   
  35.         <action name="load_allUser" class="com.agcro.jquery.action.UserAction" method="loadAllUser">  
  36.             <result name="USER" type="json"></result>  
  37.         </action>  
  38.   
  39.         <!--不采用异步提交方式显示-->  
  40.         <action name="load_allUser_jump" class="com.agcro.jquery.action.UserAction" method="loadAllUser">  
  41.             <result name="USER">/user.jsp</result>  
  42.         </action>  
  43.   
  44.     </package>  
  45. </struts>  



 

5.Service类:UserService.java

 

 

[java] view plaincopy
 
  1. public class UserService {  
  2.   
  3.     public List<UserInfo> getUser(){  
  4.         Connection conn=Db.createConnection();  
  5.         String sql="select * from user";  
  6.   
  7.         UserInfo userInfo =null;  
  8.         List<UserInfo> users =new ArrayList<UserInfo>();  
  9.         try{  
  10.             PreparedStatement ps=Db.prepare(conn, sql);  
  11.             ResultSet rs= ps.executeQuery();  
  12.             while(rs.next()){  
  13.                 userInfo = new UserInfo();  
  14.                 userInfo.setId(rs.getInt("id"));  
  15.                 userInfo.setName(rs.getString("name"));  
  16.                 users.add(userInfo);  
  17.             }  
  18.             Db.close(rs);  
  19.             Db.close(ps);  
  20.             Db.close(conn);  
  21.         }catch (Exception e){  
  22.             e.printStackTrace();  
  23.         }  
  24.         return users;  
  25.     }  
  26.   
  27.     public void addUser(UserInfo userInfo){  
  28.         Connection conn=Db.createConnection();  
  29.         String sql="insert into user (id, name) values(?,?)";  
  30.   
  31.         try{  
  32.             PreparedStatement ps=Db.prepare(conn, sql);  
  33.             ps.setInt(1, userInfo.getId());  
  34.             ps.setString(2, userInfo.getName());  
  35.             ps.executeUpdate();  
  36.   
  37.             Db.close(ps);  
  38.             Db.close(conn);  
  39.         }catch (Exception e){  
  40.             e.printStackTrace();  
  41.         }  
  42.     }  
  43. }  

 

 

6.采用非异步提交后转向的jsp:user.jsp

 

[java] view plaincopy
 
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>  
  2. <%@ taglib uri="/struts-tags" prefix="s" %>  
  3. <html>  
  4. <head>  
  5.     <title></title>  
  6. </head>  
  7. <body>  
  8.     <div id="u">  
  9.         <s:iterator value="userList" var="c">  
  10.             <s:property value="#c.id"/> |  
  11.             <s:property value="#c.name"/> |  
  12.             </br>  
  13.         </s:iterator>  
  14.     </div>  
  15.   
  16. </body>  
  17. </html>  


7.每个人都知道的应用程序配置文件:web.xml 

 

 

[html] view plaincopy
 
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <web-app xmlns="http://java.sun.com/xml/ns/javaee"  
  3.            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
  4.            xsi:schemaLocation="http://java.sun.com/xml/ns/javaee  
  5.           http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"  
  6.            version="2.5">  
  7.   
  8.     <welcome-file-list>  
  9.         <welcome-file>index.jsp</welcome-file>  
  10.       </welcome-file-list>  
  11.   
  12.     <filter>  
  13.         <filter-name>struts2</filter-name>  
  14.         <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>  
  15.     </filter>  
  16.     <filter-mapping>  
  17.         <filter-name>struts2</filter-name>  
  18.         <url-pattern>/*</url-pattern>  
  19.     </filter-mapping>  
  20. </web-app>  

 

 

8.访问数据库类:Db.java

 

[java] view plaincopy
 
  1. package com.agcro.jquery.util;  
  2. import java.sql.*;  
  3. /** 
  4.  * Created by IntelliJ IDEA. 
  5.  * UserInfo: Anyx 
  6.  * Date: 12-4-15 
  7.  * Time: 下午4:44 
  8.  * To change this template use File | Settings | File Templates. 
  9.  */  
  10. public class Db {  
  11.     public static Connection createConnection(){  
  12.         Connection conn=null;  
  13.         String url="jdbc:mysql://localhost/test";  
  14.         String username="root";  
  15.         String password="123";  
  16.   
  17.         try{  
  18.             Class.forName("com.mysql.jdbc.Driver");  
  19.             conn= DriverManager.getConnection(url, username, password);  
  20.         }catch (Exception e){  
  21.             e.printStackTrace();  
  22.         }  
  23.         return conn;  
  24.     }  
  25.   
  26.     public static PreparedStatement prepare(Connection conn, String sql){  
  27.         PreparedStatement ps=null;  
  28.   
  29.         try{  
  30.             ps=conn.prepareStatement(sql);  
  31.         }catch (Exception e){  
  32.             e.printStackTrace();  
  33.         }  
  34.         return ps;  
  35.     }  
  36.   
  37.     public static void close(Connection conn){  
  38.         if(conn == null){  
  39.             return;  
  40.         }  
  41.         try{  
  42.             conn.close();  
  43.             conn=null;  
  44.         }catch (Exception e){  
  45.             e.printStackTrace();  
  46.         }  
  47.     }  
  48.   
  49.     public static void close(PreparedStatement ps){  
  50.         try{  
  51.             ps.close();  
  52.             ps=null;  
  53.         }catch(Exception e){  
  54.             e.printStackTrace();  
  55.         }  
  56.     }  
  57.   
  58.     public  static void close(ResultSet rs){  
  59.         try{  
  60.             rs.close();  
  61.             rs=null;  
  62.         }catch (Exception e){  
  63.             e.printStackTrace();  
  64.         }  
  65.     }  
  66.   
  67. }  


我的工程结构:

 

技术分享

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。