版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/csdn565973850/article/details/84582604
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" />
注:以上仅作为流程性参考,具体代码不具有真实意义,仅供参考。