Ajax实现异步查询，返回Json数据

在项目中要实现一个发送邮件的功能，但是因为用户比较多，在选择用户的时候需要根据用户输入的关键字，及时的显现出匹配的结果，当然这个可以用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.username}','${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, Constant.SIZE_10000, 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  中文参数乱码的博客：

ajax url参数中文乱码解决

所以最终 将最终修改后的 js代码：

 $(function () {

$('#queryInput').keyup(function(e){
var queryStr = $('#queryInput').val();
<span style="color:#ff0000;">queryStr = encodeURI(encodeURI(queryStr));</span>
        $.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.username}','${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);
}
});
})
        });

修改后的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="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, 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, Constant.SIZE_10000, 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 "";
}
}
}