`
wxlgzxx_1988
  • 浏览: 66094 次
  • 性别: 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中<s:checkboxlist/>的用法详解
评论
发表评论

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

相关推荐

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