在项目中要实现一个发送邮件的功能，但是因为用户比较多，在选择用户的时候需要根据用户输入的关键字，及时的显现出匹配的结果，当然这个可以用jQuery的autocomplete.js来实现，不过今天我是用Ajax的异步功能来实现的。
首先，这个就是发送邮件的简单页面，需要在 搜索框中匹配用户相关的查询结果。
<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请求，带上用户输入 的参数。
@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的字符集设置
$(function () {
$('#queryInput').keyup(function(e){
var queryStr = $('#queryInput').val();
<span style="color:#ff0000;">queryStr = encodeURI(encodeURI(queryStr));</span>
$.ajax({
type : "post",errorThrown) {
alert(errorThrown);
}
});
})
});
@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 "";
}
}
}