用Ajax实现对数据的异步展示

对于一些场景，展示数据用异步的方式会更好，后端将数据转成 json的格式以便前端接受获取，而后台的数据一般来说是一个 list集合，list集合里面一个或者多个map<String,Object>，在后端可以将 list转成 json后传到前端（后端数据以String的形式传到前端，不过String的内容是一个或一组 json数组），具体可以这样：

public String listTojson(List<Map<String, Object>> list) {
    StringBuilder json = new StringBuilder();
    json.append("[");
    if (list != null && list.size() > 0) {
        for (Map<String, Object> map : list) {
        	json.append(new JSONObject(map)); //这里使用了org.json.JSONObject这个类 把map转换成json对象（需要导入jar包 org.json.jar）
        	json.append(",");
    	}
        json.setCharAt(json.length() - 1, ']');
    } else {
        json.append("]");
    }
    return json.toString();
}

以上代码转自：Java中list转换成json数组

下面代码是自己参考后改的

@RequestMapping("/search/wacth_ajax_list.jspx")
public void ajaxQueryWorkLog(HttpServletRequest request,HttpServletResponse response,String zbry,String dateq,String datez) throws JSONException {
	List<CmsWorkLog> list = cmsWorkLogMng.getListByWhere(dateq, datez, zbry);
	StringBuilder json = new StringBuilder();
	json.append("[");
	if (list != null && list.size() > 0) {
		Map map = new HashMap<String, Object>();
		for (CmsWorkLog workLog : list) {
			map.put("watch_time",workLog.getWatch_time());
			map.put("personnel",workLog.getPersonnel());
			map.put("address",workLog.getAddress());
			map.put("phone",workLog.getPhone());
			json.append(new JSONObject(map)); //这里使用了org.json.JSONObject这个类把map转换成json对象（需要导入jar包 org.json.jar 导入jar包 org.json.jar）
			json.append(",");
		}
		json.setCharAt(json.length() - 1, ']');
	} else {
		json.append("]");
	}
	//工具类
	ResponseUtils.renderJson(response, json.toString());
}

这种是直接以json的格式传到前端，接下来就是前端的展示了

/*	zbry,dateq,datez用jQuery获取 
	var zbry = $("#zbry").val();
	var dateq = $("#dateq").val();
	var datez = $("#datez").val();
*/
function ajaxSearch(zbry,dateq,datez) {
	$.ajax({
		traditional: true,
		type: "post",
		url: "${base}/search/wacth_ajax_list.jspx",
		data:{"zbry":zbry,"dateq":dateq,"datez":datez},
		success:function(data){
			//清空原先展示的数据（内容）
			$("#dataTable").html('');
			//遍历异步获取的数据，用append追加
			$.each(data,function (n,WorkLog) {
			//(WorkLog.watch_time).substring(0,10) 字符串截取
				$("#dataTable").append("" +
					"<div class='table_item_tr'>\n" +
						"<div class='table_item_td'>\n" + (WorkLog.watch_time).substring(0,10)+ "</div>\n" +
						"<div class='table_item_td'>\n" + WorkLog.personnel+"</div>\n" +
						"<div class='table_item_td'>\n" + WorkLog.address+"</div>\n" +
						"<div class='table_item_td'>\n" + WorkLog.phone+"</div>\n" +
					"</div>"
				)
			})
		}
	});
}

附上工具类：

package com.jeecms.common.web;

import java.io.IOException;
import javax.servlet.http.HttpServletResponse;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

/**
 * HttpServletResponse帮助类
 */
public final class ResponseUtils {
	public static final Logger log = LoggerFactory.getLogger(ResponseUtils.class);
	/**
	 * 发送文本。使用UTF-8编码。
	 * 
	 * @param response
	 *            HttpServletResponse
	 * @param text
	 *            发送的字符串
	 */
	public static void renderText(HttpServletResponse response, String text) {
		render(response, "text/plain;charset=UTF-8", text);
	}

	/**
	 * 发送json。使用UTF-8编码。
	 * 
	 * @param response
	 *            HttpServletResponse
	 * @param text
	 *            发送的字符串
	 */
	public static void renderJson(HttpServletResponse response, String text) {
		render(response, "application/json;charset=UTF-8", text);
	}

	/**
	 * 发送xml。使用UTF-8编码。
	 * 
	 * @param response
	 *            HttpServletResponse
	 * @param text
	 *            发送的字符串
	 */
	public static void renderXml(HttpServletResponse response, String text) {
		render(response, "text/xml;charset=UTF-8", text);
	}

	/**
	 * 发送内容。使用UTF-8编码。
	 * 
	 * @param response
	 * @param contentType
	 * @param text
	 */
	public static void render(HttpServletResponse response, String contentType,
			String text) {
		response.setContentType(contentType);
		response.setHeader("Pragma", "No-cache");
		response.setHeader("Cache-Control", "no-cache");
		response.setDateHeader("Expires", 0);
		try {
			response.getWriter().write(text);
		} catch (IOException e) {
			log.error(e.getMessage(), e);
		}
	}
}