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

最新推荐文章于 2024-07-14 03:34:02 发布
最新推荐文章于 2024-07-14 03:34:02 发布
阅读量8.5k 收藏 2
点赞数 1
分类专栏： js 文章标签： Ajax json 异步请求
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/judyfun/article/details/42195423
版权


在项目中要实现一个发送邮件的功能，但是因为用户比较多，在选择用户的时候需要根据用户输入的关键字，及时的显现出匹配的结果，当然这个可以用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);" οnclick="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);" οnclick="chooseSender('${user.id}','${user.username}','${user.email}');">${user.username }</a></dd>
								content += "<dd><a href='javascript:void(0);' οnclick="+"\"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);" οnclick="chooseSender('${user.id}','${user.username}','${user.email}');">${user.username }</a></dd>
								content += "<dd><a href='javascript:void(0);' οnclick="+"\"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 "";
			}
		}
	}



judyfun
关注
专栏目录
AJAX异步请求JSON格式数据
Valentino112358的博客
07-20 270
AJAX异步请求 A: 异步Asynchronous J: JavaScript A: And X: XML 同步请求: 客户端请求到服务器,如果服务器没有响应,客户端只能等待,卡死 异步请求: 客户端请求到服务器,如果服务器没有响应,客户可是自由活动 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更...
使用异步回调方式查询数据
黑色空间
08-17 1690
异步方式在.NET 1.1中,SqlCommand类提供的ExeuteReader()方法用于将CommandText发送到Connection并生成一个SqlDataReader,该方法是一个同步方法,也就是说,在该方法未完成之前,工作线程一直处于阻塞状态,程序不能做其他工作;在.NET 2.0中,微软在SqlCommand类中提供了BeginExecuteReader()和EndExe
jquery的ajax异步请求接收返回json数据
weixin_30414245的博客
05-04 253
http://www.jb51.net/article/51122.htm jquery的ajax异步请求接收返回json数据方法设置简单，一个是服务器处理程序是返回json数据，另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以。这篇文章对此进行了实例介绍,需要的朋友可以参考下 jquery的ajax异步请求接收返回json数据方法设置简单，...
jquery ajax 接受JSON响应
最新发布
weixin_36885197的博客
07-14 38
如何使用jQuery Ajax接受JSON响应 1. 了解整体流程 在使用jQuery Ajax接受JSON响应之前，首先需要了解整个流程。下面是一些基本的步骤： 步骤 描述 1 发起Ajax请求 2 服务器处理请求并返回JSON响应 3 客户端接受并处理JSON响应 2. 详细步骤及示例代码 ...
Ajax异步调用放回JSON类型的数据
CHBSRZF的博客
11-16 692
function addOption(data,value){ var list = document.getElementById("option"); list.options.length = list.options.length+1; var option = new Option(data,value,false,true); list.options[list.opt
异步请求。用Ajax请求来传递json数据
weixin_44162368的博客
05-31 638
json数据交互和restful风格 异步请求通常用Ajax来发起请求（里面传递json数据） 1.导入jar包 属于jackson.core中的包 2.在界面添加一个onclick。触发事件。 引入 添加function(){ } 3.获取当前界面域的路径 <% application.setAttribute(“APP_PATH”,request.getContextPath()); ...
Ajax实现异步数据获取
xiuxiuxiulai的博客
09-24 1941
AJAX: Asynchronous JavaScript and XML。现在允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.（B/S：前后端分离） 使用场景举例： 在百度等搜索引擎打出xxs时输入框会自动弹出相关的信息、网页地图放大或者缩小时并不会刷新网页等。 原理： 使用ajax与服务器交互时，发送以及接收的信息是特殊数据格式，而非整个网页程序，因此不需要刷新。即数据在客户端...
jquery的ajax异步请求接收返回json数据实例
12-03
在JavaScript的世界中，jQuery库极大地简化了与服务器端交互的过程，特别是对于异步请求（Ajax）和处理返回的JSON数据。本篇文章将深入探讨如何使用jQuery的`$.ajax`方法来实现异步请求并接收JSON数据。 首先，JSON...
使用getJSON()异步请求服务器返回json格式数据的实现
12-12
jQuery库提供了一个简洁的方法——`getJSON()`，用于发送AJAX请求，从服务器获取JSON格式的数据。本文将详细介绍如何使用`getJSON()`以及相关的注意事项。 首先，`getJSON()`是jQuery提供的一个便捷的函数，用于...
jQuery Ajax异步处理Json数据详解
12-08
在本篇文章中，我们将深入探讨如何使用 jQuery 的 AJAX 方法 `$.getJSON` 和 `$.ajax` 来异步处理 JSON 数据。 首先，`$.getJSON` 是一个简化的 AJAX 函数，专门用于从服务器获取 JSON 数据。在提供的示例中，当...
使用异步方式查询数据库记录
12-14
使用异步方式查询数据库记录
Ajax异步请求JSon数据(图文详解)
10-23
在编程过程中使用ajax调用数据的时候，难免要进行逻辑的处理，接受的数据也变的复杂比如数组类型的数据，这时候就需要使用JSON数据类型进行处理，通过本篇文章给大家介绍Ajax异步请求json数据，需要的朋友可以参考下...
AJAX异步请求&JSON数据格式
weixin_58545784的博客
07-17 3450
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。 JSON是一种轻量级的数据交换格式。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效益。
js ajax异步请求实例,JavaScript_jquery的ajax异步请求接收返回json数据实例，jquery的ajax异步请求接收返回jso - phpStudy...
weixin_29671137的博客
08-06 319
jquery的ajax异步请求接收返回json数据实例jquery的ajax异步请求接收返回json数据方法设置简单，一个是服务器处理程序是返回json数据，另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以。代码示例如下：$('#send').click(function () {$.ajax({type : "GET",url : "a.php",data...
ajax异步返回各种数据
CC206476的博客
12-11 1263
public static void render(HttpServletResponse response,String contentType,String text){ response.setContentType(contentType); try { response.getWriter().write(text); } catch (IOException e) { //
ajax实现异步查询
weixin_34195546的博客
03-13 253
为什么80%的码农都做不了架构师？>>> ...
ajax 异步访问数据库,AJAX异步调用数据库.doc
weixin_39731807的博客
08-05 333
AJAX异步调用数据库AJAX异步调用数据库页面上我们经常用到登录不刷新或者验证用户输入是不是和数据库要求的一致。我们可以通过与数据库的交互来实现，但是这样会产生数据刷新。带来的用户体验不是很好。那么我们就可以通过ajax异步调用来获取。这样的话就是通过客户端的异步调用服务器。不会产生刷新的效果。下面的代码清晰的阐述出了如何实现：1：test.aspx%@Page Language="C#"Aut...
处理Ajax异步查询出的数据
This is HuangWenJun' CSDN.
02-14 437
Ajax异步查询出的数据push到新数组(保存、处理)不了解决办法： //第一步：定义一个全局变量存储查询结果 var ObjData = ""; //第二步：处理查询出来的数据 function dealData(data){ //处理数据（解决了多条数据同时查询后异步导致不能push到新数组中等问题） } //第三步：异步查询数据应用 $.ajax({ url:--;...
jQuery AJAX异步获取与处理JSON数据教程
"jQuery Ajax异步处理Json数据详解，包括使用$.getJSON和$.ajax方法从服务器获取JSON数据，以及解析和展示数据的示例。同时提供了与ASP.NET结合的实例，展示如何在后端处理和返回JSON数据。" 在Web开发中，jQuery库...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值