Jquery ajax请求返回html数据类型

简介: 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" />

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


相关文章
|
10天前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
18 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
|
4天前
|
前端开发 Python
Django框架中Ajax GET与POST请求的实战应用
Django框架中Ajax GET与POST请求的实战应用
|
11天前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
4天前
|
JSON 前端开发 JavaScript
Struts2处理(jQuery)Ajax请求(2)
Struts2处理(jQuery)Ajax请求
|
4天前
|
JSON 前端开发 JavaScript
Struts2处理(jQuery)Ajax请求(1)
Struts2处理(jQuery)Ajax请求
|
16天前
切方块游戏 HTML5+jQuery【附源码】
切方块游戏 HTML5+jQuery【附源码】
13 0
|
16天前
制作温馨浪漫爱心表白动画特效HTML5+jQuery【附源码】
制作温馨浪漫爱心表白动画特效HTML5+jQuery【附源码】
19 0
|
24天前
|
JSON 前端开发 JavaScript
Django——Ajax请求
Django——Ajax请求
|
2月前
|
JSON 前端开发 JavaScript
jQuery ajax读取本地json文件 三级联动下拉框
jQuery ajax读取本地json文件 三级联动下拉框
|
移动开发 JavaScript 前端开发