本次实现采用ajax+jquery+struts2.0+hibernate3.0
主要贴出本人写的重要点的源码
下面是前台界面的HTML代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <mce:style type="text/css"><!-- body{ text-align:center; } #key{ width:200px; height:30px; } #hotkeys{ border:1px solid gray; display:none; } #hotkeys div{ text-align:left; } --></mce:style><style type="text/css" mce_bogus="1"> body{ text-align:center; } #key{ width:200px; height:30px; } #hotkeys{ border:1px solid gray; display:none; } #hotkeys div{ text-align:left; } </style> <mce:script type="text/javascript" src="js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js"></mce:script> <mce:script type="text/javascript"><!-- var index = -1;//下拉框所选的索引 var size = 0;//下拉框记录的条数 function search(e){ var e = e||window.event;//如果是ie需要取得window.envent 如果是firfox,事件可以直接从参数获得 if(e.keyCode == 38){ //方向键向上 if(size != 0){ $("#hotkeys div").css("background","");//取得hotkeys下的所有div 将背景清空 if(index == 0){ index = size; } index = index - 1; $("#hotkeys div").eq(index).css("background","gray");//将选定的div背景设置为灰色 //当前选中的div的值 var value = $("#hotkeys div").eq(index).html(); //当前选定的值设置到输入框中 $("#key").val(value); } }else if(e.keyCode == 40){ //方向键向下 if(size != 0){ $("#hotkeys div").css("background",""); index = index + 1; if(index == size){ index = 0; } $("#hotkeys div").eq(index).css("background","gray"); //当前选中的div的值 var value = $("#hotkeys div").eq(index).html(); //当前选定的值设置到输入框中 $("#key").val(value); } }else if(e.keyCode == 13){ //按回车键 if(size != 0){ var value = $("#hotkeys div").eq(index).html(); $("#key").val(value); $("#hotkeys").css("display","none"); //提交 .... } }else{ var key = $("#key").val(); $.post("HotkeyAction_getKeys.action",{"name":key},function (data){ $("#hotkeys").html("");//清空下拉框 size = 0; //获得xml数据，包装成jquery对象，查找所有的key元素，循环 $(data).find("key").each(function(){ size = size + 1; //创建div,设置内容为<key></key>里的文本值,将div加入到hotkeys div中 $("<div>").html(this.firstChild.data).appendTo("#hotkeys"); }); //设置div的位置 var x = $("#key").offset().left;//文本框离浏览器左边的距离 var y = $("#key").offset().top;//文本框离浏览器上面的距离 var w = $("#key").width();//文本框的宽度 var h = $("#key").height();//文本框的高度 alert(x +" "+ y +" "+ w +" "+h); $("#hotkeys").css("position","absolute") .css("display","block") .width(w+5) .offset({top:y+h+5,left:x}); }); } } // --></mce:script> </head> <body> <input type="text" id="key" οnkeyup="search(event)" /><br/> <div id="hotkeys"> </div> <mce:script type="text/javascript"><!-- //文本框失去焦点事件 $("#key").blur(function(){ $("#hotkeys").css("display","none"); }); // --></mce:script> </body> </html>
HotkeyAction_getKeys.action
ajax访问的action
public class HotkeyAction extends ActionSupport implements ModelDriven{ private Hotkey hotkey = new Hotkey(); private HotkeyDao dao = new HotkeyDao(); public Object getModel() { // TODO Auto-generated method stub return hotkey; } public String getKeys(){ String name = ServletActionContext.getRequest().getParameter("name"); List keys = dao.getKeys(name); // ActionContext.getContext().put("list", keys); PrintWriter out = null; try { HttpServletResponse response = ServletActionContext.getResponse(); response.setContentType("text/xml;charset=utf-8"); out = response.getWriter(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } out.println("<?xml version=/"1.0/" ?>"); out.println("<hotkeys>"); for(int i = 0;i < keys.size();i++){ Hotkey text = (Hotkey)keys.get(i); out.print("<key>" + text.getName() + "</key>"); } out.println("</hotkeys>"); return null; } public Hotkey getHotkey() { return hotkey; } public void setHotkey(Hotkey hotkey) { this.hotkey = hotkey; } }
关于HotkeyDao和实体类Hotkey的代码我这就不贴出来了
struts.xml文件 访问HotkeyAction_getKeys.action 就是访问的HotkeyAction里的getKeys()
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
