<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>autoComplete jquery</title> <script type="text/javascript" src="https://www.jb51.net/js/jquery-1.8.0.js" charset="utf-8"></script> <script type="text/javascript" src="https://www.jb51.net/js/jquery.autocomplete.js" charset="utf-8"></script> <link href="https://www.jb51.net/css/jquery.autocomplete.css"> <script type="text/javascript"> $(document).ready( function() { $("#kw").autocomplete( "autoCompleteJQueryAction.html", { minChars : 1, //在触发autoComplete前用户至少需要输入的字符数.Default: 1 //matchContains : true, mustMatch : false, //如果设置为true,autoComplete只会允许匹配的结果出现在输入框 dataType : 'json', selectFirst:false, autoFill:false,//自动填充值 matchCase:false, //比较是否开启大小写敏感开关，默认false(指向后台传递的数据大小写) scroll:true, //当结果集大于默认高度时是否使用卷轴显示Default: true parse : function(resultData) { var rows = []; var d = resultData.serarchResult; for ( var i = 0; i < d.length; i++) { rows[i] = { data : d[i], value : d[i].catalogId, result : d[i].catalogName }; } return rows; }, formatItem : function(row,i,max) { return row.catalogName + " [" + row.count + "]"; //return row.id+""; //结果中的每一行都会调用这个函数,显示的格式,row为每一个对象，i为下表从一开始，max为最大下标 } }).result(function(event,item){ alert(item.catalogName); }); }); </script> </head> <body> <input type="text" maxlength="100"> <input type="submit" value="submit"> </body> </html>
(4)异步上传
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="https://www.jb51.net/js/jquery-1.8.0.js" charset="utf-8"></script> <script type="text/javascript" src="https://www.jb51.net/js/ajaxupload.3.6.js" charset="utf-8"></script> <script type="text/javascript"> $(document).ready(function() { var uploadObj = { action : 'ajaxFileUploadAction.html', name : 'upload', onSubmit : function(file, type) { //alert("gag"); }, onComplate : function(file, data) { alert("true"); } }; new AjaxUpload($("[type='submit']"), uploadObj); }); </script> </head> <body> <form action="" enctype="multipart/form-data" method="post"> <input type="file"><input type='submit' value="上传"> </form> </body> </html>
（5）日历
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="https://www.jb51.net/js/jquery-1.8.0.js" charset="utf-8"></script> <script type="text/javascript" src="https://www.jb51.net/js/jquery-ui.js" charset="utf-8"></script> <script type="text/javascript" src="https://www.jb51.net/js/ui.datepicker-zh-CN.js" charset="utf-8"></script> <link href="https://www.jb51.net/css/jquery-ui.css"> <script type="text/javascript"> $(document).ready(function(){ $("[name='data']").datepicker({ //dateFormat:'yy-mm-dd' }); }); </script> </head> <body> <input type="text"> </body> </html>
后台的action如下：
package com.jquery.plugin.action; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOException; import java.util.ArrayList; import java.util.List; import javax.servlet.http.HttpServletRequest; import org.apache.struts2.ServletActionContext; import org.apache.struts2.json.annotations.JSON; import com.jquery.plugin.dao.DataDao; import com.jquery.plugin.pojo.Catalog; import com.opensymphony.xwork2.Action; import com.opensymphony.xwork2.ActionSupport; public class JQueryAction extends ActionSupport{ /** * */ private static final long serialVersionUID = 1L; private String q ; private Integer rp; private Integer page; private Integer total; private List<Catalog> serarchResult = new ArrayList<Catalog>(); private List<Catalog> rows = new ArrayList<Catalog>(); private String sortname; private File upload; private String uploadFileName; public String getQ() { return q; } public void setQ(String q) { this.q = q; } public Integer getRp() { return rp; } public void setRp(Integer rp) { this.rp = rp; } public Integer getPage() { return page; } public void setPage(Integer page) { this.page = page; } @JSON(name="total") public Integer getTotal() { return total; } public String redirect(){ System.out.println("go.."); return Action.SUCCESS; } //{age:1}[search:{age:1}] @JSON(name="serarchResult") public List<Catalog> getSerarchResult() { return serarchResult; } public List<Catalog> getRows() { return rows; } public void setRows(List<Catalog> rows) { this.rows = rows; } public String getSortname() { return sortname; } public void setSortname(String sortname) { this.sortname = sortname; } public File getUpload() { return upload; } public void setUpload(File upload) { this.upload = upload; } public String getUploadFileName() { return uploadFileName; } public void setUploadFileName(String uploadFileName) { this.uploadFileName = uploadFileName; } public String autoCompleteJQuery(){ System.out.println("q:"+q); List<Catalog> result = DataDao.getList(); if(!"".equals(q)){ for (Catalog catalog : result) { if(catalog.getCatalogName().toLowerCase().contains(q.toLowerCase())){ serarchResult.add(catalog); } } } System.out.println(serarchResult.size()); return Action.SUCCESS; } public String flexigrid(){ try { List<Catalog> result = DataDao.getList(); Integer startIndex = (page-1)*rp; Integer endIndex = startIndex+rp; total = result.size(); while(endIndex>result.size()){ endIndex--; } System.out.println("page:"+page+":total:"+total); System.out.println("sortname:"+sortname); for(int i = startIndex ;i < (endIndex);i++){ rows.add(result.get(i)); } } catch (Exception e) { e.printStackTrace(); } return Action.SUCCESS; } public String ajaxFileUpload(){ System.out.println("begin..."); BufferedOutputStream out = null ; BufferedInputStream in = null ; String uploadPath = null ; String contextPath = null; try { //fileName = URLEncoder.encode(fileName, "GB2312"); System.out.println("fileName:"+uploadFileName); byte [] buffer = new byte[1024]; HttpServletRequest request = ServletActionContext.getRequest(); contextPath = request.getSession().getServletContext().getRealPath("https://www.jb51.net/"); uploadPath = contextPath+"/upload/"+uploadFileName; System.out.println(uploadPath); out = new BufferedOutputStream(new FileOutputStream(uploadPath)); int len = 0 ; in = new BufferedInputStream(new FileInputStream(upload)); while((len = in.read(buffer, 0, buffer.length))!=-1){ out.write(buffer, 0, len); out.flush(); } } catch (FileNotFoundException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); }finally{ try { if(out != null){ out.close(); } if(in != null){ in.close(); } } catch (IOException e) { e.printStackTrace(); } } System.out.println("上传成功"); return null; } }