码迷，mamicode.com
首页 > Web开发 > 详细

struts2+jQuery+ajax调用演示

时间：2015-05-20 12:58:40      阅读：118      评论：0      收藏：0      [点我收藏+]

标签：

 

来自：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. }  


我的工程结构：

 

技术分享

 

struts2+jQuery+ajax调用演示

标签：

原文地址：http://www.cnblogs.com/thounderstorm/p/4516674.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！