Jquery ajax请求返回html数据类型

最新推荐文章于 2022-08-18 17:58:59 发布

原创最新推荐文章于 2022-08-18 17:58:59 发布 · 1.2w 阅读

4 ·

CC 4.0 BY-SA版权

java 同时被 2 个专栏收录

75 篇文章

订阅专栏

静态页

7 篇文章

订阅专栏

本文介绍如何使用JQuery AJAX进行异步请求，从后台获取HTML页面，并将其渲染到前端。示例包括FTL模板代码、JS脚本及Java后台处理逻辑。

Jquery ajax请求返回html数据类型

Jquery ajax 异步请求返回 html

Jquery ajax 异步请求返回 html

本文简述通过ajax传参请求后台获取html页面并渲染。

ftl页面代码

1.代码如下：

<div class="tab_title">	
	<span id="trainedTableLable" onclick="show(${infoColumn.id});">${infoColumn.name}</span>
 </div>
<ul class="ul_txt" id="noticeContent" name="noticeContent"> </ul>
<script type="text/javascript" src="${request.getContextPath()}/js/utils/md5/jQuery.md5.js"></script>
<script type="text/javascript" src="${request.getContextPath()}/js/utils/jbox/jquery.jBox-zh-CN.js"></script>
<script type="text/javascript" src="${request.getContextPath()}/js/utils/strUtils/dateUtil.js"></script>

2.页面js如下：

	function show(columnId){
			$("span").removeClass();
			$("#trainedTableLable").addClass("tab_blue");
			$("#noticeContent p").remove();
			if($("#noticeContent li").length>0){
			    	$("#noticeContent li").remove();
			   }
		    var params = {columnId:columnId,ranNum: Math.random()};
			var targetUrl = encodeURI("${request.getContextPath()}/infocontent/infoContent/loadInfoContentByColumnId");
			$.ajax({
			    	type : "post",
			    	url : targetUrl,
			    	dataType : "html",
			    	data : params,
			    	async:false,
			    	success : function(html) {
			    		$("#noticeContent").append(html);
             			}
			    });
	}

java代码

1.代码如下：

	@RequestMapping(value = "/loadInfoContentByColumnId")
	public String loadInfoContentByColumnId(@RequestParam(value = "columnId", required = true) Long columnId ,Model model) {
		
		InfoContent infoContent = new InfoContent();
		infoContent.setColumnId(columnId);
		infoContent.setPageParameter(getpagePageParameterForNotice());
		//根据栏目分类查询类目内容
		Pagination<InfoContent> pagination = infoContentService.getInfoContentByColumnId(infoContent);
		model.addAttribute("page", pagination);
		model.addAttribute("infoContentList", pagination.getList());
		return "modules/user/notice";
	}

返回html页面如下

1.notice.ftl页面如下：

		<#if infoContentList??>
			<#list infoContentList as infoContent>
				<#if infoContent.top??&&infoContent.top==1>
					<li><a class='txt_a' href='javascript:;' onclick="showDetial('"+contentId+"');">${infoContent.title}<img src='${request.getContextPath()}/images/imgtop.png' style='width:16px'/></a><span>${infoContent.updateDateString}</span></li>
				<#else>
					<li><a class='txt_a' href='javascript:;' onclick="showDetial('"+contentId+"');">${infoContent.title}</a><span>${infoContent.updateDateString}</span></li>
				</#if>
			</#list>
		</#if>
		<#import "/common/pageShow.ftl" as myPage>
		<@myPage.pager page=page callFunName="pageQuery" />

注：以上仅作为流程性参考，具体代码不具有真实意义，仅供参考。