`
wxlgzxx_1988
  • 浏览: 68600 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

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

    博客分类:
  • Web
 
阅读更多
Struts2+JQuery+Json及JQuery相关插件的例子

 

注意事项:

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

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

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

readme.txt:

             

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

 

1.struts.xml配置:

<?xml version="1.0" encoding="UTF-8"?>  

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

 

2.ShowAction.java配置 :

             

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

 

3.show.jsp配置:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  

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

 

4.tableopen.jsp弹出层插件:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  

  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
  2.   
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>Thickbox Plus - Download by http://www.codefans.net</title>  
  6.   
  7. <mce:style type="text/css" media="all"><!-- 
  8. @import "css/global.css"; 
  9. --></mce:style><style type="text/css" media="all" mce_bogus="1">@import "css/global.css";</style>  
  10. <mce:script src="/S2SHJQuery/js/jquery.js" mce_src="S2SHJQuery/js/jquery.js" type="text/javascript"></mce:script>  
  11. <mce:script src="/S2SHJQuery/lib/thickbox_plus.js" mce_src="S2SHJQuery/lib/thickbox_plus.js" type="text/javascript"></mce:script>  
  12.   
  13. </head>  
  14. <body>  
  15.     <div id="contentPad">  
  16.     <h1>Thickbox Plus</h1>  
  17.     <div>  
  18.         <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>  
  19.             
  20.         <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"/></a>  
  21.     </div>  
  22.     </div>  
  23. </body>  
  24. </html>  

 

5.tablesorter.jsp排序层插件:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  

  1. <%  
  2.     String path = request.getContextPath();  
  3.     String basePath = request.getScheme() + "://"  
  4.             + request.getServerName() + ":" + request.getServerPort()  
  5.             + path + "/";  
  6. %>  
  7.   
  8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  9. <html>  
  10.     <head>  
  11.         <base href="<%=basePath%>">  
  12.   
  13.         <title>列表排序</title>  
  14.         <link rel="stylesheet" type="text/css" media="screen"  
  15.             href="css/screen.css" />  
  16.         <mce:script src="/S2SHJQuery/js/jquery.js" mce_src="S2SHJQuery/js/jquery.js"  
  17.             type="text/javascript"></mce:script>  
  18.         <mce:script  
  19.             src="/S2SHJQuery/lib/jquery.tablesorter.js"  
  20.             type="text/javascript"></mce:script>  
  21.         <mce:script type="text/javascript"><!--  
  22.         $(document).ready(function() {  
  23.                 $("#userList").tablesorter({sortList: [ [2,1]]} );//也可通过传递参数来实现  
  24.             });   
  25.       
  26. // --></mce:script>  
  27.     </head>  
  28.     <body>  
  29.         This is my JSP page.  
  30.         <br>  
  31.         <table id="userList">  
  32.     <thead>  
  33.         <tr>  
  34.             <th>Name</th>  
  35.             <th>Sex</th>  
  36.             <th>old</th>  
  37.         </tr>  
  38.     </thead>  
  39.     <tbody>  
  40.     <tr>  
  41.             <td>李四</td>  
  42.             <td></td>  
  43.             <td>14</td>  
  44.         </tr>  
  45.         <tr>  
  46.             <td>张三</td>  
  47.             <td></td>  
  48.             <td>50</td>  
  49.         </tr>  
  50.         <tr>  
  51.             <td>赵五</td>  
  52.             <td>Sex</td>  
  53.             <td>60</td>  
  54.         </tr>  
  55.         <tr>  
  56.             <td>丽丽</td>  
  57.             <td></td>  
  58.             <td>18</td>  
  59.         </tr>  
  60.         <tr>  
  61.             <td>蝈蝈</td>  
  62.             <td></td>  
  63.             <td>24</td>  
  64.         </tr>  
  65.         </tbody>  
  66. </table>  
  67.     </body>  
  68. </html>  

 

6.tablesortpager.jsp排序兼分页插件:

             

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4. <mce:script language="javascript" type="text/javascript" src="/S2SHJQuery/lib/jquery-1.2.6.pack.js" mce_src="S2SHJQuery/lib/jquery-1.2.6.pack.js"></mce:script>  
  5. <mce:script language="javascript" type="text/javascript" src="/S2SHJQuery/lib/jquery.tablesorter.js" mce_src="S2SHJQuery/lib/jquery.tablesorter.js"></mce:script>  
  6. <mce:script language="javascript" type="text/javascript" src="/S2SHJQuery/lib/jquery.tablesorter.pager.js" mce_src="S2SHJQuery/lib/jquery.tablesorter.pager.js"></mce:script>  
  7.   
  8. <mce:script language="javascript"><!--  
  9. $(document).ready(function(){  
  10.     $("#userList").tablesorter({sortList: [ [2,1]]}).tablesorterPager({container: $("#pager")});     
  11. });  
  12. // --></mce:script>  
  13. <title>jquery.tablesorter实现table排序(含分页)</title>  
  14. </head>  
  15. <body>  
  16. <table width="50%" border="1" align="center" cellpadding="0" cellspacing="0" id="userList">  
  17.                       <thead>  
  18.                       <tr class="main-font2">   
  19.                       <th>Name</th>  
  20.                         <th>Sex</th>  
  21.                         <th>old</th>  
  22.                       </tr>  
  23.   </thead>  
  24.                         <tbody>  
  25.                        
  26.                      <tr>  
  27.             <td>李四</td>  
  28.             <td></td>  
  29.             <td>14</td>  
  30.         </tr>  
  31.         <tr>  
  32.             <td>张三</td>  
  33.             <td></td>  
  34.             <td>50</td>  
  35.         </tr>  
  36.         <tr>  
  37.             <td>赵五</td>  
  38.             <td>Sex</td>  
  39.             <td>60</td>  
  40.         </tr>  
  41.         <tr>  
  42.             <td>丽丽</td>  
  43.             <td></td>  
  44.             <td>18</td>  
  45.         </tr>  
  46.         <tr>  
  47.             <td>蝈蝈</td>  
  48.             <td></td>  
  49.             <td>24</td>  
  50.         </tr>  
  51.         <tr>  
  52.             <td>飞行1</td>  
  53.             <td></td>  
  54.             <td>24</td>  
  55.         </tr>  
  56.         <tr>  
  57.             <td>飞行2</td>  
  58.             <td></td>  
  59.             <td>24</td>  
  60.         </tr>  
  61.         <tr>  
  62.             <td>飞行3</td>  
  63.             <td></td>  
  64.             <td>24</td>  
  65.         </tr>  
  66.         <tr>  
  67.             <td>飞行4</td>  
  68.             <td></td>  
  69.             <td>24</td>  
  70.         </tr>  
  71.         <tr>  
  72.             <td>飞行5</td>  
  73.             <td></td>  
  74.             <td>24</td>  
  75.         </tr>  
  76.         <tr>  
  77.             <td>飞行6</td>  
  78.             <td></td>  
  79.             <td>24</td>  
  80.         </tr>  
  81.         <tr>  
  82.             <td>飞行7</td>  
  83.             <td></td>  
  84.             <td>24</td>  
  85.         </tr>  
  86.                         </tbody>  
  87. </table>  
  88. <div id="pager" class="pager">  
  89.                                 <form align="center">  
  90.                                     每页记录数:  
  91.                                     <select class="pagesize">  
  92.                                         <option selected="selected" value="10">10</option>  
  93.                                         <option value="15">15</option>  
  94.                                         <option value="20">20</option>  
  95.                                     </select>  
  96.                                          
  97.                                     <input type="hidden" class="pagedisplay"/>  
  98.                                     <a href="#" mce_href="#"  class="first" title="首页">首页</a> |   
  99.                                     <a href="#" mce_href="#"  class="prev" title="上一页">上一页</a> |   
  100.                                     <a href="#" mce_href="#" class="next" title="下一页">下一页</a> |   
  101.                                     <a href="#" mce_href="#" class="last" title="尾页">尾页</a> |   
  102.                                     共<span class="totalpage"></span>页 |   
  103.                                     第<span class="curpage"></span>页 |  
  104.                                     到第 <input name="pageNo" type="text" class="pageNo txt" size="3" value=""/> 页 <a href="#" mce_href="#" class="pageGo">GO</a>      
  105.                                 </form>  
  106. </div>  
  107. </body>  
  108. </html>  

 

7.tablesuggest.jsp提示插件:

             

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  1. <%  
  2.     String path = request.getContextPath();  
  3.     String basePath = request.getScheme() + "://"  
  4.             + request.getServerName() + ":" + request.getServerPort()  
  5.             + path + "/";  
  6. %>  
  7.   
  8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  9. <html>  
  10.     <head>  
  11.         <base href="<%=basePath%>">  
  12.   
  13.         <title>搜索框提示</title>  
  14.         <link rel="stylesheet" type="text/css" media="jquery.autocomplete.css"  
  15.             href="css/jquery.autocomplete.css" />  
  16.         <mce:script src="/S2SHJQuery/js/jquery.js" mce_src="S2SHJQuery/js/jquery.js"  
  17.             type="text/javascript"></mce:script>  
  18.         <mce:script  
  19.             src="/S2SHJQuery/lib/jquery.autocomplete.js"  
  20.             type="text/javascript"></mce:script>  
  21.         <mce:script type="text/javascript"><!--  
  22.         var  arr = ["Allen","Albert","Alberto","Alladin"];  
  23.         $(document).ready(function() {  
  24.                 //$("#userList").autocomplete(arr);  
  25.                  $("#userList").autocomplete("show.action", { selectFirst:true,extraParams: {testvalue:function(){return $('#userList').val();}},   
  26.                 width: 170,minChars:1, selectOnly: 1,inputSeparator:':'});  
  27.             });   
  28.       
  29. // --></mce:script>  
  30.     </head>  
  31.     <body>   
  32.         This is my JSP page.   
  33.         <br>  
  34.         <table >  
  35.     <tbody>  
  36.         <tr>  
  37.             <td>提示框测试:<input type="text" name="userList" id="userList"/></td>  
  38.         </tr>  
  39.         </tbody>  
  40. </table>  
  41.     </body>  
  42. </html>  

 

8.table-validation.jsp验证插件:

             

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  1. <%  
  2. String path = request.getContextPath();  
  3. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  4. %>  
  5. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  6. <html>  
  7.   <head>  
  8.     <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" mce_href="css/screen.css" />  
  9.     <mce:script src="/S2SHJQuery/js/jquery.js" mce_src="S2SHJQuery/js/jquery.js" type="text/javascript"></mce:script>  
  10.  <mce:script src="/S2SHJQuery/lib/jquery.validate.js" mce_src="S2SHJQuery/lib/jquery.validate.js" type="text/javascript"></mce:script>  
  11.  <mce:script src="/S2SHJQuery/lib/jquery.validate.messages_cn.js" mce_src="S2SHJQuery/lib/jquery.validate.messages_cn.js" type="text/javascript"></mce:script>  
  12.  <mce:style type="text/css"><!--  
  13. * { font-family: Verdana; font-size: 96%; }  
  14. label { width: 10em; float: left; }  
  15. label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }  
  16. p { clear: both; }  
  17. .submit { margin-left: 12em; }  
  18. em { font-weight: bold; padding-right: 1em; vertical-align: top; }  
  19. --></mce:style><style type="text/css" mce_bogus="1">* { font-family: Verdana; font-size: 96%; }  
  20. label { width: 10em; float: left; }  
  21. label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }  
  22. p { clear: both; }  
  23. .submit { margin-left: 12em; }  
  24. em { font-weight: bold; padding-right: 1em; vertical-align: top; }</style>  
  25.   <mce:script type="text/javascript"><!--  
  26.   $(document).ready(function(){  
  27.     //引入验证的js.jquery.validate.js,并引入中文js jquery.validate.messages_cn.js  
  28.     //可在js里面进行修改,注意css格式  
  29.     //获取form值后,即可根据id值来进行validation操作  
  30.     //取相应的验证规则:对应的输入值即可  
  31.     //可参照锋利的JQuery P218页  
  32.     //同时可利用这一特性生成验证码  
  33.     $("#commentForm").validate({  
  34.         rules: {  
  35.             username: {  
  36.                 required: true,  
  37.                 minlength: 3  
  38.             },  
  39.             email: {  
  40.                 required: true,  
  41.                 email: true  
  42.             },  
  43.             url:"url",  
  44.             comment: "required"  
  45.         }  
  46.       });  
  47.   });  
  48.     
  49. // --></mce:script>  
  50.   </head>  
  51.     
  52.   <body>  
  53.     <form class="cmxform" id="commentForm" method="get" action="">  
  54.  <fieldset>  
  55.    <legend>jquery-validation 插件jsp</legend>  
  56.    <p>  
  57.      <label for="cusername">用户名:</label>  
  58.      <em>*</em><input id="cusername" name="username" size="25" />  
  59.    </p>  
  60.    <p>  
  61.      <label for="cemail">邮件:</label>  
  62.      <em>*</em><input id="cemail" name="email" size="25"  />  
  63.    </p>  
  64.    <p>  
  65.      <label for="curl">URL:</label>  
  66.      <em>  </em><input id="curl" name="url" size="25"  value="" />  
  67.    </p>  
  68.    <p>  
  69.      <label for="ccomment">评论:</label>  
  70.      <em>*</em><textarea id="ccomment" name="comment" cols="22">  
分享到:
评论

相关推荐

    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例子

    总结起来,"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+jQuery+json实现AJAX.zip

    struts2+jQuery+json实现AJAX.zip

    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的...

Global site tag (gtag.js) - Google Analytics