如何将 JSON 值从 Controller 传递到 Thymeleaf 中的 HTML?

How to pass JSON value from Controller to HTML in Thymeleaf?

我尝试使用 DataTables "Server side pagination"。我正在按照本教程完成它“http://javahonk.com/spring-mvc-pagination-datatables/”。它使用 JSP 作为他们的 html 语言。我在这里使用的是 "Thymeleaf"

但是当我尝试这样做时,我卡在 JSON 值已经生成,但它出现在我的控制台中,不会出现在我的 HTML 页面中

这是我的控制器: SpringMVCController.java

@RequestMapping(value = "/barangs", method = RequestMethod.GET, produces = "application/json")
public String processFindBarang(HttpServletRequest request) {

//Fetch the page number from client
Integer pageNumber = 0;
if (null != request.getParameter("iDisplayStart"))
    pageNumber = (Integer.valueOf(request.getParameter("iDisplayStart"))/10)+1;     

//Fetch search parameter
String searchParameter = request.getParameter("sSearch");

//Fetch Page display length
Integer pageDisplayLength = Integer.valueOf(request.getParameter("iDisplayLength"));

//Create page list data
Collection<ReturOrder> returList = createPaginationData(pageDisplayLength);

ReturObjectJson returJsonObject = new ReturObjectJson();
//Set Total display record
returJsonObject.setiTotalDisplayRecords(200);
//Set Total record
returJsonObject.setiTotalRecords(200);
returJsonObject.setAaData(returList);

Gson gson = new GsonBuilder().setPrettyPrinting().create();
String json2 = gson.toJson(returJsonObject);

return json2;

}

它已经 return JSON 做得很好,在我的 Eclipse IDE

中调试时它出现在我的 "console" 区域

这是我的 HTML 页面。 Main.html

<form method="GET">
<h2>Spring MVC pagination using data tables</h2>
<table width="70%" style="border: 3px;background: rgb(243, 244, 248);"><tr><td>
<table id="tablepage" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Nomor_Transaksi</th>
                <th>Tgl_Trans</th>
                <th>FlagCetak</th>
                <th>Kd_Plg</th>
            </tr>
        </thead>   
    </table>
    </td></tr></table>
</form>

这是我在

地区的 javascript
<script type="text/javascript" th:inline="javascript">

    //Plug-in to fetch page data
jQuery.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
{
return {
"iStart":         oSettings._iDisplayStart,
"iEnd":           oSettings.fnDisplayEnd(),
"iLength":        oSettings._iDisplayLength,
"iTotal":         oSettings.fnRecordsTotal(),
"iFilteredTotal": oSettings.fnRecordsDisplay(),
"iPage":          oSettings._iDisplayLength === -1 ?
0 : Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
"iTotalPages":    oSettings._iDisplayLength === -1 ?
0 : Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
};
};

$(document).ready(function() {

$("#tablepage").dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sort": "position",
        //bStateSave variable you can use to save state on client cookies: set value "true"
        "bStateSave": false,
        //Default: Page display length
        "iDisplayLength": 10,
        //We will use below variable to track page number on server side(For more information visit: http://legacy.datatables.net/usage/options#iDisplayStart)
        "iDisplayStart": 0,
        "fnDrawCallback": function () {
            //Get page numer on client. Please note: number start from 0 So
            //for the first page you will see 0 second page 1 third page 2...
            //Un-comment below alert to see page number
         //alert("Current page number: "+this.fnPagingInfo().iPage);    
        },        
        "sAjaxSource": "barangs",
        "aoColumns": [
            { "mData": "Nomor_Transaksi" },
            { "mData": "Tgl_Trans" },
            { "mData": "FlagCetak" },
            { "mData": "Kd_Plg" },

        ]
    } );

} );

</script>

该值不会显示,在我的网络浏览器中执行时会出现这些错误。它显示一个警告框,上面写着:“DataTables 警告:table id=tablepage - Ajax 错误。有关此错误的更多信息,请参阅 http://datatables.net/tn/7

但是当我查看我的 eclipse 控制台时,JSON 值如:

    {
      "Nomor_Transaksi": "xxxxx",
      "Tgl_Trans": "Jan 15, 2014 12:00:00 AM",
      "FlagCetak": "Y",
      "Kd_Plg": "MGS                    "
    },
    {
      "Nomor_Transaksi": "xxxxx",
      "Tgl_Trans": "Jan 6, 2014 12:00:00 AM",
      "FlagCetak": "Y",
      "Kd_Plg": "MGS                    "
    }
  ]
}", template might not exist or might not be accessible by any of the configured Template Resolvers

什么时候在这里想念我?

找到了!我错过了一个@ResponseBody 标签!

这是我的控制器函数

@RequestMapping(value = "/barangs", method = RequestMethod.GET, produces = "application/json")
public @ResponseBody String processFindBarang(HttpServletRequest request) {

//Fetch Page display length
Integer pageDisplayLength = Integer.valueOf(request.getParameter("iDisplayLength"));

//Fetch the page number from client
Integer pageNumber = 0;
if (null != request.getParameter("iDisplayStart"))
    pageNumber = (Integer.valueOf(request.getParameter("iDisplayStart"))/pageDisplayLength)+1;      

/*  //Fetch search parameter
    String searchParameter = request.getParameter("sSearch");*/

//Create page list data
List<ReturOrder> returList = createPaginationData(pageDisplayLength, pageNumber);

ReturObjectJson returJsonObject = new ReturObjectJson();
//Set Total display record
returJsonObject.setiTotalDisplayRecords(200);
//Set Total record
returJsonObject.setiTotalRecords(200);
returJsonObject.setAaData(returList);

Gson gson = new GsonBuilder().setPrettyPrinting().create();
String json2 = gson.toJson(returJsonObject);

return json2;
}