在项目中要实现一个发送邮件的功能,但是因为用户比较多,在选择用户的时候需要根据用户输入的关键字,及时的显现出匹配的结果,当然这个可以用jQuery的autocomplete.js来实现,不过今天我是用Ajax的异步功能来实现的。
首先,这个就是发送邮件的简单页面,需要在 搜索框中匹配用户相关的查询结果。
右边搜索用户的 DIV 代码:
<div class="email_tongxu_r"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><input name="" id="queryInput" type="text" style="width:140px;height: 25px; line-height: 25px; font-size: 12px;" /> <input class="btn btn-inverse" id="queryBtn" type="button" value="搜索" /></td> </tr> </table> <dl id="contactUsers"> <dt>最近联系人</dt> <dt>所有联系人</dt> <c:forEach items="${allUser }" var="user"> <dd><a href="javascript:void(0);" onclick="chooseSender('${user.id}','${user.username}','${user.email}');">${user.username }</a></dd> </c:forEach> </dl> </div>
因为要监听用户在 该输入框的行为,所以给这个输入框添加一个 键盘 抬起的 监听事件 ,监听 事件就是要获取 用户输入的内容,发起Ajax的请求,去后台查询出匹配的数据,
在前台进行显示:
jS代码:
$(function () { $('#queryInput').keyup(function(e){ var queryStr = $('#queryInput').val(); $.ajax({ type : "post",url : "<%=path%>/mail/queryUser.do?queryStr="+queryStr,success : function(data) { if(!isNull(data)){ var dataObj = eval("(" + data + ")"); var roo = dataObj.result; var content = "<dt>搜索结果</dt>"; for (var i = 0; i < roo.length; i++) { // <dd><a href="javascript:void(0);" onclick="chooseSender('${user.id}','${user.email}');">${user.username }</a></dd> content += "<dd><a href='javascript:void(0);' onclick="+"\"chooseSender('"+roo[i].id+"','"+roo[i].name+"','"+roo[i].mail+"');\">"+roo[i].name+"</a></dd>"; } /////删除节点 // TODO 第一次删除了 dt标签之后,第二次删除就找不到了。。。所以要判断一下 var dd = document.getElementsByTagName('dd'); var dtArray = document.getElementsByTagName('dt'); // if(dtArray.length > 0){ // var dt0 = document.getElementsByTagName('dt')[0]; // var dt1 = document.getElementsByTagName('dt')[1]; // dt0.parentNode.removeChild(dt0); // dt1.parentNode.removeChild(dt1); // } // for(var i= 0 ; i < dtArray.length ; ){ // var dt = document.getElementsByTagName('dt')[i]; // dt.parentNode.removeChild(dt); // } $('#contactUsers').html(content); } },error : function(XMLHttpRequest,textStatus,errorThrown) { alert(errorThrown); } }); }) });
当监听事件,在搜索框用户输入的内容的时候,就会发起Ajax请求,带上用户输入 的参数。
后台Java代码:
@RequestMapping(value = "/queryUser",produces = "text/html;charset=UTF-8") public @ResponseBody String queryUser(HttpServletRequest req,Model model) { String queryStr = req.getParameter("queryStr"); <span style="white-space:pre"> </span> StringBuilder sb = new StringBuilder(); sb.append(" 1=1 "); sb.append(" and o.username like '%" + queryStr.trim() + "%'"); QueryResult<UserInfo> result1 = userInfoService.getScrollData(0,Constant.SIZE_10000,sb.toString(),new Object[]{}); if(null != result1 && result1.getResultList().size() > 0){ // 根据用户名查到了数据 JSONObject json = new JSONObject(); JSONArray array = new JSONArray(); List<UserInfo> userList = result1.getResultList(); for(int i = 0 ; i < userList.size() ; i++ ){ JSONObject object = new JSONObject(); object.put("name",userList.get(i).getUsername()); object.put("mail",userList.get(i).getEmail()); array.add(object); } json.put("result",array); return json.toString(); } else { // 用户名没有查到数据 StringBuilder sb2 = new StringBuilder(); sb2.append(" 1=1 "); sb2.append(" and o.email like '%" + queryStr.trim() + "%'"); QueryResult<UserInfo> result2 = userInfoService.getScrollData(0,sb2.toString(),new Object[]{}); if(null != result2 && result2.getResultList().size() > 0){ // 根据邮箱查到了数据 JSONObject json = new JSONObject(); JSONArray array = new JSONArray(); List<UserInfo> userList = result2.getResultList(); for(int i = 0 ; i < userList.size() ; i++ ){ JSONObject object = new JSONObject(); object.put("id",userList.get(i).getId()); object.put("name",userList.get(i).getUsername()); object.put("mail",userList.get(i).getEmail()); array.add(object); } json.put("result",array); System.out.println(json.toString()); return json.toString(); } else { return ""; } } }
完成了以上的代码,异步搜索 英文字母和数字是没有问题的,但是会有Ajax url 参数的中文乱码问题,这个问题网上面 有很多的答案。因为要跨浏览器和取决于当前tomcat自
己的编码方式,采用对要传递的参数进行 两次编码和 两次解码的方法就能解决。
encodeURI(encodeURI("url的中文参数值")),
java代码中使用URLDecoder.decode(request.getParameter("variables"),"UTF-8")方法获得参数值;
这个方法则不依赖tomcat的字符集设置
关于 Ajax url 中文参数乱码的博客:
所以最终 将最终修改后的 js代码:
$(function () { $('#queryInput').keyup(function(e){ var queryStr = $('#queryInput').val(); <span style="color:#ff0000;">queryStr = encodeURI(encodeURI(queryStr));</span> $.ajax({ type : "post",errorThrown) { alert(errorThrown); } }); }) });
修改后的java代码:
@RequestMapping(value = "/queryUser",Model model) { String queryStr = req.getParameter("queryStr"); <span style="color:#ff0000;">try { queryStr = URLDecoder.decode(queryStr,"UTF-8"); } catch (UnsupportedEncodingException e) { // TODO Auto-generated catch block e.printStackTrace(); }</span> // if(StringUtils.isBlank(queryStr)){ // return ""; // } StringBuilder sb = new StringBuilder(); sb.append(" 1=1 "); sb.append(" and o.username like '%" + queryStr.trim() + "%'"); QueryResult<UserInfo> result1 = userInfoService.getScrollData(0,array); System.out.println(json.toString()); return json.toString(); } else { return ""; } } }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。