程序博客网 > 淘宝店铺视频怎么制作

Java中：struts2+jQuery+ajax调用演示

来源：互联网 发布：淘宝店铺视频怎么制作 编辑：程序博客网 时间：2024/05/21 12:32

环境：

操作系统：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 plaincopyprint?
  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 plaincopyprint?
  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. });
  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. });
  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. });
  44. }
  45. });
  46. });
  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. });
  64. }
  65. });
  66. });
  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. });
  82. }
  83. });
  84. });
  85. });

3.action类：UserAction.java

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


4.Struts配置文件：struts.xml

[html] view plaincopyprint?
  1. <?xml version="1.0" encoding="UTF-8"?>
  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">
  7. <struts>
  8. <!--struts2的开发模式-->
  9. <constant name="struts.devMode" value="true"/>
  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>
  21. <!--客户端请求（非动态调用）-->
  22. <action name="userInfo" class="com.agcro.jquery.action.UserAction"method="loadUserInfo">
  23. <result name="userInfo" type="json"></result>
  24. </action>
  26. <action name="userInfoList" class="com.agcro.jquery.action.UserAction"method="loadUserInfoList">
  27. <result name="userInfoList" type="json"></result>
  28. </action>
  31. <action name="add_user" class="com.agcro.jquery.action.UserAction"method="addUser">
  32. <result name="ADD_SUCCESS" type="json"></result>
  33. </action>
  35. <action name="load_allUser" class="com.agcro.jquery.action.UserAction"method="loadAllUser">
  36. <result name="USER" type="json"></result>
  37. </action>
  39. <!--不采用异步提交方式显示-->
  40. <action name="load_allUser_jump" class="com.agcro.jquery.action.UserAction"method="loadAllUser">
  41. <result name="USER">/user.jsp</result>
  42. </action>
  44. </package>
  45. </struts>


5.Service类：UserService.java

[java] view plaincopyprint?
  1. public class UserService {
  3. public List<UserInfo> getUser(){
  4. Connection conn=Db.createConnection();
  5. String sql="select * from user";
  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. }
  27. public void addUser(UserInfo userInfo){
  28. Connection conn=Db.createConnection();
  29. String sql="insert into user (id, name) values(?,?)";
  31. try{
  32. PreparedStatement ps=Db.prepare(conn, sql);
  33. ps.setInt(1, userInfo.getId());
  34. ps.setString(2, userInfo.getName());
  35. ps.executeUpdate();
  37. Db.close(ps);
  38. Db.close(conn);
  39. }catch (Exception e){
  40. e.printStackTrace();
  41. }
  42. }
  43. }

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

[java] view plaincopyprint?
  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>
  16. </body>
  17. </html>

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

[html] view plaincopyprint?
  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">
  8. <welcome-file-list>
  9. <welcome-file>index.jsp</welcome-file>
  10. </welcome-file-list>
  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 plaincopyprint?
  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";
  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. }
  26. public static PreparedStatement prepare(Connection conn, String sql){
  27. PreparedStatement ps=null;
  29. try{
  30. ps=conn.prepareStatement(sql);
  31. }catch (Exception e){
  32. e.printStackTrace();
  33. }
  34. return ps;
  35. }
  37. public staticvoid 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. }
  49. public staticvoid close(PreparedStatement ps){
  50. try{
  51. ps.close();
  52. ps=null;
  53. }catch(Exception e){
  54. e.printStackTrace();
  55. }
  56. }
  58. public static void close(ResultSet rs){
  59. try{
  60. rs.close();
  61. rs=null;
  62. }catch (Exception e){
  63. e.printStackTrace();
  64. }
  65. }
  67. }

我的工程结构：



0 0
淘宝店铺视频怎么制作 淘宝店铺视频怎么制作
原创粉丝点击
热门IT博客
图书录入软件图书录入软件
jstor数据库中文版jstor数据库中文版
mysql存储过程面试题
人工智能最好书籍
千牛淘宝卖家怎么发货
软件测试工具qtp
with php config
小学 考试软件
photoshop mac版
黑客和程序员的区别
淘宝笔记本电脑退货
科瑞物业软件
python 简单 画图
麟龙软件至尊版
如何在淘宝开个网店
算法导论 16章思考题
oracle数据同步工具
经典的单机游戏 知乎
什么是java工程师
java 高并发编程
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 泰金所 泰锡宜为什么迟迟不建 盐泰锡常宜城际铁路 泰阿剑 东川泰隆商务酒店 刀锋之影泰隆出装 泰隆宏瑞饭店 泰顺县教师发展中心 泰顺三魁住宿 泰顺招聘网 温州泰顺网 泰顺人才招聘网 泰顺人才网 泰顺人事人才网 泰颜美 青柠泰餐厅 女道士 酿鲮鱼 炸鲮鱼的做法大全 千万不要养泰鳄 泱组词 泱的读音 泳池尺寸 泳组词 泳的组词 泳怎么组词 泳组词和拼音 泳字组词 透明泳衣秀 比基尼泳装秀 泳装内衣秀 性感女连衣裙 性感游泳衣 男式游泳衣 游泳衣套装 泳衣女童 女子游泳衣 性感女靴 吴晓丹泳装图片 赖雨濛泳衣照 泳衣比基尼照片大全 姜佩瑶穿比基尼照片

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里