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" />
注：以上仅作为流程性参考，具体代码不具有真实意义，仅供参考。
