AJAX基本操作：前后端数据交互-优快云博客

本文主要介绍AJAX的基本操作，包括前端如何接受数据填充到页面的ul元素中，以及后台如何传输数据，实现异步刷新的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.前端接受数据

<!-- 引入 jquery 核心库 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
	$(function() {
		// 发送 ajax 请求
		var url = "${pageContext.request.contextPath}/category?method=findAllCategory";
		// category 为处理请求的controller包里的CategoryServlet类
		// findAllCategory 为CategoryServlet类中对应的处理方法
		$.get(url, function(data) {
			// 获取导航栏的 ul
			var $ul = $("#menuId");
			// 往 ul 中显示内容
			$(data).each(function() {
				$ul.append($("<li><a href='#'>" + this.cname + "</a></li>"));
			});
		}, "json");
		// json为后台传来的数据名
	});
</script>

页面中的ul接收

<ul id="menuId" class="nav navbar-nav"> </ul>

2.后台传输数据

/**
	 * 查找所有的分类数据
	 * @param request
	 * @param response
	 * @return
	 * @throws Exception
	 */
	public String findAllCategory(HttpServletRequest request, HttpServletResponse response) throws Exception {

	// 1. 调用 CategoryService 获取所有的分类数据
	List<Category> cList = new CategoryServiceImpl().findAllCategory();

	// 2. 将 list 转 json
	String json = JsonUtil.list2json(cList);
	/** JsonUtil.list2json 为自写工具类， 将list集合转换成String类型的JSON数据格式
	/**
		 * 将list集合转换成String类型的JSON数据格式
		 * @param list
		 * @return
		 */
		public static String list2json(List<?> list){
			JSONArray jsonArray = JSONArray.fromObject(list);
			return jsonArray.toString();
		}
		*/

	// 3. 将 JSON 数据返回给调用的页面
	response.setContentType("text/html; charset=utf-8");
	response.getWriter().println(json);
	// json为传输给前端页面的数据名
	
	return null;
}