0
点赞
收藏
分享

微信扫一扫

Jquery ajax请求返回html数据类型

和谐幸福的人生 2022-12-09 阅读 81


Jquery ajax请求返回html数据类型

  • ​​Jquery ajax 异步请求返回 html​​
  • ​​ftl页面代码​​
  • ​​java代码​​
  • ​​返回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" />

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


举报

相关推荐

0 条评论