目录
上机练习 3 ——在 Ajax 中直接返回 HTML 内容生成主题管理页面
上机练习4——使用 .load() 方法为管理员页面加载服务器生成的主题列表
7.2.1 在 Ajax 请求中返回 HTML 格式内容
在前面介绍的 Ajax 实现中,复杂结构的响应数据由服务器通过 JSON 格式发送,
客户端接收后再经过 JavaScript 提取数据并构建 HTML 文档结构进行展示。
除此之外,服务器端还可以直接产生 HTML 格式的响应结果,客户端则可以将
响应结果直接套用在现有页面中。下面任以加载管理员页面的新闻列表为列展示此种
实现方式,供大家了解。了解两种响应格式的区别请扫描二维码。
加载 HTML 内容
首先修改管理员页面通过 Ajax 获取新闻列表的 JavaScript 脚本,如示例 4 所示。
示例4
$(document).ready(function()){
function initNews(){//使用 Ajax 技术获取新闻列表数据
$.ajax({
"url" :"../util/news",
"type" :"GET",
"data" :"opr = listHtml",
"dataType" :"html",
"success" :"processNewsList",
});
}
function processNewsList(data){//展示新闻列表
$("#opt_area>ul").html(data);
}
……//省略其他代码
});
注意
在回调方法 procssNewsList() 中,没有对响应结果 data 做任何处理,而是将
其直接设置成列表的内容。
调整 NewsServlet 中的相关功能实现,以 HTML 元素的格式构建响应内容,如示例
5 所示。
示例 5
……//省略其他代码
else if("listHtml".equals(opr)){//编辑新闻时对新闻的查找
List<News> list = newsService.findAllNews();
News news = null;
StringBuffer newsList = new StringBuffer("");
for(int i =0;i<list.size();){
news = list.get(i);
newsList.append("<li>"+news.g