在项目中要实现一个发送邮件的功能，但是因为用户比较多，在选择用户的时候需要根据用户输入的关键字，及时的显现出匹配的结果，当然这个可以用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 "";
			}
		}
	}

己的编码方式，采用对要传递的参数进行 两次编码和 两次解码的方法就能解决。

encodeURI(encodeURI("url的中文参数值"))，

java代码中使用URLDecoder.decode(request.getParameter("variables"),"UTF-8")方法获得参数值;

这个方法则不依赖tomcat的字符集设置

关于 Ajax url 中文参数乱码的博客：

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 "";
			}
		}
	}