JQuery Ajax AutoComplete 是用JSON数据

最新推荐文章于 2025-12-18 13:32:52 发布

最新推荐文章于 2025-12-18 13:32:52 发布 · 199 阅读

文章标签：

#json #Ajax #jQuery #Cache #Gmail #ViewUI

本文详细介绍了JSON数据格式及其在服务器端和客户端的应用方法。重点讲解了如何正确设置服务器响应编码以避免错误，并演示了使用JQuery接收和解析JSON数据的具体步骤。

JSON数据的格式：

{"users":[
    {"uid":"123","displayName":"User 123","mail":"123@example.com"},
    {"uid":"456","displayName":"User 456","mail":"456@example.com"},
    {"uid":"789","displayName":"User 789","mail":"789@example.com"},
]}

或者

{[
    {"uid":"123","displayName":"User 123","mail":"123@example.com"},
    {"uid":"456","displayName":"User 456","mail":"456@example.com"},
    {"uid":"789","displayName":"User 789","mail":"789@example.com"},
]}

在服务器端，在返回数据时一定要设置编码，否则会出错：

//设置编码，这句最重要
response.setContentType("application/json;charset=UTF-8");   
response.setCharacterEncoding("UTF-8");   

// 设置浏览器不要缓存   
response.setHeader("Pragma", "No-cache");   
response.setHeader("Cache-Control", "no-cache");   
response.setDateHeader("Expires", 0);
String json = "";
response.getWriter().println(json);

在客户端是用JQuery接收JSON数据：

$("#id").autocomplete("url",{
						            delay:10,//延迟10秒
						            max:5,//最多5条记录
						            minChars:1,
						            matchSubset:1,
						            matchContains:1,
						            cacheLength:10,
						            matchContains: true,   
						            scrollHeight: 250, 
						            width:250,
						            dataType:'json',//返回的数据类型为JSON类型
						            parse:function(data) {//解释返回的数据，把其存在数组里
						            	var parsed = [];
								        for (var i = 0; i < data.length; i++) {
								            parsed[parsed.length] = {
							                data: data[i],
							                value: data[i].itemid,
							                result: data[i].itemid //返回的结果显示内容
								        	};
								        }
								        return parsed;
						            },
						            formatItem: function(item) {//显示下拉列表的内容
return "<div>"+item.itemid + "   " + item.name+"</div>";
 },
formatMatch: function(item) {
	return item.itemid;
},
formatResult: function(item) {
return item.itemid;
}
 }).result(function(event, item, formatted) {//把返回的结果内容显示在其他文本框上			
				                        $("#ortherid").val(item.name);
				                    });