`
乌托邦之爱
  • 浏览: 283896 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

Struts2+JQuery+Json及JQuery相关插件的例子

jQueryjsonStrutsAjaxJavaScript 
阅读更多

文章来源: http://www.360doc.com/content/10/0731/19/117897_42788515.shtml#

注意事项：

  1.开发时，应将工程及相应的页面数据库编码均设为：utf8解决乱码问题；

  2.当前开发版本为struts2.1.8，不同的struts2版本会有不同的jar包需要引入，具体见readme.txt

  3.autocomplete插件不是很完善，尚不能处理json数据；弹出层框架只针对图片(可修改格式适应其它形式)

readme.txt:

             

view plaincopy to clipboardprint?
  1. 1.JQuery的Ajax实现并与struts2的结合   
  2. 2.配置过程：   
  3.   a.新建web项目;   
  4.   b.修改web.xml文件   
  5.   c.在src下添加struts.xml文件,添加jar包支持:freemarker.jar ognl.jar struts2-core.jar commons-fileupload.jar    
  6.       commons-io.jar xwork-core-2.1.6.jar（这个包加上版本号，是因为下文要提到它），注意jar包支持   
  7.       这六个包是struts必须依赖的jar包   
  8.   d.配置jsp文件,在jsp里面添加jquery支持   
  9.   e.配置action   
  10.   f   ( 一)在struts2.1.6之前的版本：   
  11.         添加相应的json包:json-lib.jar jsonplugin.jar 这里要注意很重要的一点，因为json大量引用了Apache commons的包，所以这里要一并加入，   
  12.        需要的commons包共4个，除了commons的包外，还需要引入一个 ezmorph的包，所以这一步一共要引入7个包，列出如下：   
  13.        commons-collections.jar commons-lang.jar   
  14.        commons-beanutils.jar commons-logging.jar ezmorph.jar 再加上json的两个包共七个   
  15.        (二)struts2.1.6，添加jsonplugin0.34或者jsonplugin0.7   
  16.        （三)struts2.1.8则添加json-lib-2.2.3.jar,struts2-json-plugin,struts2-junit-plugin   
  17.           
  18.           
  19. 3.插件使用：    
  20.     1.validation插件：详见table-validation.jsp，主要为引入一个jquery.validate.js，获取相应的属性名来进行验证;   
  21.     2.tablesort插件：目前用的是兼容中文的官网版本,一是可以实现自动排序，二是支持中文;要注意在table当中的格式，这点很重要   
  22.     3.tablesortpager插件   
  23.        
  24.        
  25.        
  26.  JQuery与Json结合的一些注意事项：   
  27.  1.$.get(url,data,function(data){   
  28.     eval(data);   
  29.     })   
  30.   eval(data)将数据转换为js对象；   
  31.   实际上如果返回的json对象，可通过将参数直接命名为json即可，如下   
  32.   $.get(url.data,function(data){},"json")   
  33.   
  34. 2.取json属性时，尽量用中括号方式，原因是如果有数字属性会发生不识别的现象   
  35.   eg:var a=obj["31001"];   
  36.      //obj.31001则可能出错   
  37.    解决办法有其它方式：比如将属性值31001改为s31001   
  38.       
  39.  3.乱码问题:   
  40.     在struts1.2中，通过设置表头的编码来解决乱码问题，注意对于xml和json，要分别设置为text/xml和text/json   
  41.         eg:response.setContentType("text/json; charset=utf-8");   

 

1.struts.xml配置：

             

view plaincopy to clipboardprint?
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <!-- 指定Struts 2配置文件的DTD信息 -->  
  3. <!DOCTYPE struts PUBLIC   
  4.         "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"   
  5.         "http://struts.apache.org/dtds/struts-2.0.dtd">  
  6. <struts>  
  7.      <constant name="struts.i18n.encoding" value="utf-8"></constant>  
  8.     <package name="S2SHJQuery" extends="json-default">  
  9.         <action name="show" class="action.ShowAction">  
  10.             <result type="json"/>  
  11.         </action>  
  12.     </package>  
  13. </struts>  

 

2.ShowAction.java配置 ：

             

view plaincopy to clipboardprint?
  1. package action;   
  2.   
  3. import java.util.ArrayList;   
  4. import java.util.List;   
  5. import java.util.Map;   
  6.   
  7. import org.apache.struts2.json.annotations.JSON;   
  8.   
  9. import com.opensymphony.xwork2.ActionSupport;   
  10. public class ShowAction extends ActionSupport {   
  11.     private String testvalue;   
  12.     private String result;   
  13.     private List<String> list;   
  14.     private List<User> userlist;   
  15.     private User user;   
  16.     private Map<String, User> map;   
  17.     private String[] autoarray;   
  18.     public String[] getAutoarray() {   
  19.         return autoarray;   
  20.     }   
  21.     public void setAutoarray(String[] autoarray) {   
  22.         this.autoarray = autoarray;   
  23.     }   
  24.     @JSON(serialize=false)   
  25.     public Map<String, User> getMap() {   
  26.         return map;   
  27.     }   
  28.     public void setMap(Map<String, User> map) {   
  29.         this.map = map;   
  30.     }   
  31.     @JSON(serialize=false)   
  32.     public User getUser() {   
  33.         return user;   
  34.     }   
  35.     public void setUser(User user) {   
  36.         this.user = user;   
  37.     }   
  38.     @JSON(serialize=false)   
  39.     public List<User> getUserlist() {   
  40.         return userlist;   
  41.     }   
  42.     public void setUserlist(List<User> userlist) {   
  43.         this.userlist = userlist;   
  44.     }   
  45.     @JSON(serialize=false)   
  46.     public List<String> getList() {   
  47.         return list;   
  48.     }   
  49.     public void setList(List<String> list) {   
  50.         this.list = list;   
  51.     }   
  52.        
  53.     public void setTestvalue(String testvalue) {   
  54.         this.testvalue = testvalue;   
  55.     }   
  56.     @JSON(serialize=false)   
  57.     public String getTestvalue() {   
  58.         return testvalue;   
  59.     }   
  60.     @JSON(serialize=false)   
  61.     public String getResult() {   
  62.         return result;   
  63.     }   
  64.     public void setResult(String result) {   
  65.         this.result = result;   
  66.     }   
  67.     @Override  
  68.     public String execute() throws Exception {   
  69.         // TODO Auto-generated method stub   
  70.         System.out.println("test is ok: "+testvalue);   
  71.         //1.????string   
  72.         /*int i=9;  
  73.          //result=""+i+"";  
  74.          result="中国";*/  
  75.         //2.list?   
  76.         /*list=new ArrayList<String>();  
  77.         list.add("allen");  
  78.         list.add("中国");  
  79.         list.add("adc");*/  
  80.         //3.list?а?User   
  81.         /*userlist=new ArrayList<User>();  
  82.         User user1=new User();  
  83.         user1.setPassword(1);  
  84.         user1.setUsername("username1");  
  85.         User user2=new User();  
  86.         user2.setPassword(2);  
  87.         user2.setUsername("username2");  
  88.         User user3=new User();  
  89.         user3.setPassword(3);  
  90.         user3.setUsername("username3");  
  91.         userlist.add(user1);  
  92.         userlist.add(user2);  
  93.         userlist.add(user3);*/  
  94.         //4.User???????   
  95.         /*user=new User();  
  96.         user.setPassword(1);  
  97.         String username="中国";  
  98.         user.setUsername(username);  
  99.         System.out.println(user.getUsername());  
  100.          */  
  101.         //5.map????   
  102.         /*map=new HashMap<String, User>();  
  103.         User user1=new User();  
  104.         user1.setPassword(1);  
  105.         user1.setUsername("username1");  
  106.         User user2=new User();  
  107.         user2.setPassword(2);  
  108.         user2.setUsername("username2");  
  109.         User user3=new User();  
  110.         user3.setPassword(3);  
  111.         user3.setUsername("username3");  
  112.         map.put("s1",user1 );  
  113.         map.put("s2",user2 );  
  114.         map.put("s3",user3 );*/  
  115.         /*map=new HashMap<String, String>();//??????String,string???  
  116.         map.put("s1","user1");  
  117.         map.put("s2","user2");  
  118.         map.put("s3","user3");*/  
  119.         //7.直接传递数祖   
  120.         autoarray=new String[3];   
  121.         autoarray[0]="a";   
  122.         autoarray[1]="b";   
  123.         autoarray[2]="c";   
  124.            
  125.         return SUCCESS;   
  126.     }   
  127.   
  128.        
  129. }  

 

3.show.jsp配置:

                    

view plaincopy to clipboardprint?
  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>   
  2. <%   
  3. String path = request.getContextPath();   
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";   
  5. %>   
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  8. <html>   
  9.   <head>   
  10.   <mce:script type="text/javascript" src="/S2SHJQuery/js/jquery.js" mce_src="S2SHJQuery/js/jquery.js"></mce:script>   
  11.     <base href="<%=basePath%>">   
  12.     <title>struts2+jquery+json</title>   
  13. <mce:script type="text/javascript"><!--   
  14.     //1.struts2+jquery+json单独传递单个参数   
  15.     /*$(function(){  
  16.             $("#jquerytest").click(function(){  
  17.             var params={testvalue:$('#test').val()};  
  18.                 $.ajax({  
  19.                         url:"show.action",  
  20.                         data:params,  
  21.                         type:'post',  
  22.                         dataType:'json',  
  23.                         success:function(data){  
  24.                         //data += decodeURI(data.shtml) ;  
  25.                             alert("成功");  
  26.                             alert(data.result);  
  27.                             },  
  28.                         error:  function(){  
  29.                                 alert("失败");  
  30.                             }                     
  31.                 })  
  32.             })  
  33.         })*/  
  34.      //2.jquery单独传递含单个参数的list   
  35.      /*$(function(){  
  36.             $("#jquerytest").click(function(){  
  37.             var params={testvalue:$('#test').val()};  
  38.                 $.ajax({  
  39.                         url:"show.action",  
  40.                         data:params,  
  41.                         type:'post',  
  42.                         dataType:'json',  
  43.                         success:function(data){  
  44.                         var jsonobject=data.list;  
  45.                             for(var j=0;j<jsonobject.length;j++)  
  46.                                     {  
  47.                                         alert(jsonobject[j]);  
  48.                                     }  
  49.                             },  
  50.                         error:  function(){  
  51.                                 alert("失败");  
  52.                             }                     
  53.                 })  
  54.             })  
  55.         })*/  
  56.      //3.jquery单独传递含对象类型User的list   
  57.      $(function(){   
  58.             $("#jquerytest").click(function(){   
  59.             var params={testvalue:$('#test').val()};   
  60.                 $.ajax({   
  61.                         url:"show.action",   
  62.                         data:params,   
  63.                         type:'post',   
  64.                         dataType:'json',   
  65.                         success:function(data){   
  66.                         var jsonobject=data.userlist;   
  67.                             /*for(var j=0;j<jsonobject.length;j++)  
  68.                                     {  
  69.                                         alert(jsonobject[j].username);  
  70.                                         alert(jsonobject[j].password);  
  71.                                     }  
  72.                             */  
  73.                             $.each(jsonobject,function(key,value){   
  74.                                     alert(key+" "+value.username);   
  75.                                     alert(key+" "+value.password);   
  76.                                 })     
  77.                                 }                  
  78.                                 ,   
  79.                         error:  function(){   
  80.                                 alert("失败");   
  81.                             }                      
  82.                 })   
  83.             })   
  84.         })   
  85.      //4.jquery单独传递User对象类型   
  86.     /*$(function(){  
  87.             $("#jquerytest").click(function(){  
  88.             var params={testvalue:$('#test').val()};  
  89.                 $.ajax({  
  90.                         url:"show.action",  
  91.                         data:params,  
  92.                         type:'post',  
  93.                         dataType:'json',  
  94.                         contentType: "application/x-www-form-urlencoded; charset=UTF-8",  
  95.                         success:function(data){  
  96.                         var jsonobject=data.user;  
  97.                                         alert(jsonobject.username);  
  98.                             },  
  99.                         error:  function(){  
  100.                                 alert("失败");  
  101.                             }                     
  102.                 })  
  103.             })  
  104.         })*/  
  105.      //5.jquery传递含User对象类型的map类型   
  106.      /*$(function(){  
  107.             $("#jquerytest").click(function(){  
  108.             var params={testvalue:$('#test').val()};  
  109.                 $.ajax({  
  110.                         url:"show.action",  
  111.                         data:params,  
  112.                         type:'post',  
  113.                         dataType:'json',  
  114.                         success:function(data){  
  115.                         var jsonobject=data.map;  
  116.                             alert(data.map.s1.username);//一步一步获取值  
  117.                             $.each(data.map,function(key,value){  
  118.                                     alert(key+": "+value.username);  
  119.                                 })  
  120.                             },  
  121.                         error:  function(){  
  122.                                 alert("失败");  
  123.                             }                     
  124.                 })  
  125.             })  
  126.         })*/  
  127. // --></mce:script>   
  128.   </head>   
  129.   <body>   
  130.   <form>   
  131.   <input type="button" value="JQuery"  id="jquerytest"><br>   
  132.   <input type="text" value="美国" name="test" id="test">   
  133.   </form>   
  134.   </body>   
  135. </html>  

  

 

4.tableopen.jsp弹出层插件:

              

view plaincopy to clipboardprint?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
  3.   
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6. <title>Thickbox Plus - Download by http://www.codefans.net</title>  
  7.   
  8. <mce:style type="text/css" media="all"><!--  
  9. @import "css/global.css";  
  10. --></mce:style><style type="text/css" media="all" mce_bogus="1">@import "css/global.css";</style>  
  11. <mce:script src="/S2SHJQuery/js/jquery.js" mce_src="S2SHJQuery/js/jquery.js" type="text/javascript"></mce:script>  
  12. <mce:script src="/S2SHJQuery/lib/thickbox_plus.js" mce_src="S2SHJQuery/lib/thickbox_plus.js" type="text/javascript"></mce:script>  
  13.   
  14. </head>  
  15. <body>  
  16.     <div id="contentPad">  
  17.     <h1>Thickbox Plus</h1>  
  18.     <div>  
  19.         <a href="images/image1.jpg" mce_href="images/image1.jpg" title="Sample caption" class="thickbox"><img src="images/image1_t.jpg" mce_src="images/image1_t.jpg" alt="Image 1" /></a>  
  20.              
  21.         <a href="images/image2.jpg" mce_href="images/image2.jpg" title="Another sample caption" class="thickbox"><img src="images/image2_t.jpg" mce_src="images/image2_t.jpg" alt="Image 2"/></<
    分享到：
    | jquery validator验证测试页
    评论
    发表评论

    您还没有登录,请您登录后再发表评论

相关推荐

    Struts2+jQuery（不用JSON）实现局部刷新

    - **Struts2的JSON插件**：虽然题目要求不使用JSON，但通常情况下，Struts2通过JSON插件返回数据给jQuery是最方便的方式。不过，我们可以通过设置Content-Type为"text/plain"或"text/html"，让Struts2返回非JSON...

    Struts2+Jquery+JSON 应用例子

    Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON

    Struts2 + jQuery+JSON 实现ajax

    ### Struts2 + jQuery + JSON 实现Ajax 在现代Web开发中，Ajax技术因其能够实现网页的局部刷新而被广泛采用。本篇文章介绍如何利用Struts2框架结合jQuery与JSON来构建一个简单的Ajax功能。 #### 一、环境搭建 1. ...

    struts2+jQuery+json实现AJAX.zip

    struts2+jQuery+json实现AJAX.zip

    struts2+jquery+json+ajax例子

    总结起来，"struts2+jquery+json+ajax"的例子展示了如何利用这些技术协同工作，实现一个无刷新的登录界面，提供流畅的用户体验。通过Struts2处理业务逻辑和数据验证，jQuery和Ajax负责前后端的通信，JSON作为数据...

    struts2+spring+hibernate+jquery+json

    Struts2、Spring、Hibernate、jQuery 和 JSON 是五个在IT行业中极为重要的技术组件，它们各自在Web应用开发中扮演着不同的角色。这篇文章将详细介绍这些技术的整合使用以及它们的功能。 首先，Struts2 是一个基于 ...

    一个简单的struts2+json+jquery 交互的例子

    当用户界面触发某个事件（比如点击按钮），jQuery会发起Ajax请求，Struts2 Action执行相关逻辑并生成JSON响应，最后jQuery将数据插入到网页中，完成一次完整的交互。 总结来说，这个例子展示了如何利用Struts2处理...

    Json+Struts2+JQuery及JQuery相关插件的例子,json架包...

    8. "Struts2+JQuery+Json及JQuery相关插件的例子(好).files" 可能是一个包含其他资源的目录，如图片、CSS样式表或JavaScript文件。 通过这个例子，你可以学习到如何在实际项目中结合使用Struts2、JQuery和JSON，...

    struts2+jquery+json 小例子

    在这个"struts2+jquery+json"的小例子中，我们可能会看到以下几个关键知识点： 1. **Struts2框架**： - **Action和Result**：Struts2的核心组件，Action负责业务逻辑处理，Result负责控制页面跳转。 - **...

    struts2+jquery+json

    Struts2、jQuery和JSON是Web开发中的三个关键技术，它们在构建动态、交互式的Web应用程序时发挥着重要作用。下面将分别对这三个技术进行详细解释，并探讨它们如何协同工作。 Struts2是一个基于MVC（Model-View-...

    struts2+json

    在Struts2中集成JSON支持，首先需要添加相应的依赖，比如struts2-json-plugin，这个插件提供了JSON结果类型。当Action执行完毕后，可以返回一个JSON结果类型，Struts2会自动将Action的属性转换为JSON格式并返回给...

    Struts2+JSON+JQuery实现简单的验证

    在项目中引入Struts2、JSON插件和JQuery的相关依赖库。 2. **创建Struts2 Action**：创建一个Action类，例如`ValidationAction`，其中包含需要验证的属性以及相应的getter和setter方法。在execute方法中，对这些...

    struts2+ajax+jquery

    这里的`MyAction`类会处理请求并设置模型数据，然后Struts2的JSON插件会将这些数据转化为JSON格式并返回给前端。在`success.jsp`页面，我们可以用jQuery解析并展示这些数据。 此外，Struts2还提供了一个名为`struts...

    结合struts2.3.4+jQuery+mysql+json

    结合struts2.3.4+jQuery+mysql+json开发的一个小例子。

    json+jquery+struts2+hibernate+spring 实现的小型bbs系统，这个提供包

    json+jquery+struts2+hibernate+spring 实现的小型bbs系统，这个提供包 ，很不错的下载后，好好徐希一下吧

    Struts2+JQuery+Json实例

    在"Struts2+JQuery+Json实例"中，我们探讨的是如何结合这三个技术来创建动态、响应式的Web应用。以下是这个实例中的关键知识点： 1. **获取JS值**：在JQuery中，我们可以使用`val()`函数来获取表单元素的值，如...

    Struts2+Jquery+Ajax

    "struts2 jar"文件包含了Struts2框架的核心库，可能包括struts2-core、struts2-convention、struts2-json-plugin等依赖，这些是开发Struts2应用必不可少的组件。 "Struts2"可能是项目实例代码，包括Action类、视图...

    struts2+jQuery+json 实例

    Struts2、jQuery和JSON是Web开发中的三个关键组件，它们共同构成了高效、动态和交互式的用户界面。这里我们将深入探讨这三个技术，并结合实例来理解它们如何协同工作。 首先，Struts2是一个基于MVC（Model-View-...

    struts2+jQuery+json 实例 测试过了 运行成功 从别人那偷来的

    在项目中，`Struts2JQueryJson`文件夹可能包含了HTML页面、JavaScript脚本、Struts2相关的Action类、以及可能的 strut2 配置文件等资源。 总结来说，这个实例通过结合Struts2的后端控制、jQuery的前端交互和JSON的...

Magicbox
Global site tag (gtag.js) - Google Analytics