如何在Thymelaf中将JSON值从控制器传递到HTML
How to pass JSON value from Controller to HTML in Thymeleaf?
我尝试使用DataTables进行"服务器端分页"。我一直在遵循这个教程来完成它"http://javahonk.com/spring-mvc-pagination-datatables/".它使用JSP作为他们的html语言。我在这里使用的是"Thymelaf"
但当我尝试这样做时,我发现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;
}
它已经很好地返回了JSON,它出现在我的"控制台"区域,同时在我的Eclipse IDE 中进行调试
这是我的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>
该值不会显示,它在我的web浏览器中执行时会给我这些错误。它显示了一个警告框,上面写着:"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;
}
相关文章:
- 将值从html传递到AngularJS控制器
- $Scope变量在HTML中不更新,尽管在控制器中不断更新
- 在动态加载的html中使用角度控制器
- 如何在Thymelaf中将JSON值从控制器传递到HTML
- 允许在Angular控制器或视图中使用html标记
- 如何将数据从 HTML 表单提供给控制器
- 在 MVC 中将 HTML 表单数据从视图传递到控制器 ASP.NET
- 如何从弹簧控制器方法更新html img src
- 将数据从MVC控制器传递到Angular视图,而不在最终的html中显示数据值
- 有多少HTML应该在一个角度控制器中
- 从html调用angularjs控制器中的一个函数,但未定义范围变量
- 如何从html输入类型=“”中只获得Angular控制器变量中的时间值;时间”;
- AngularJS使用MVC动态获取html,附加到主体,并绑定一个控制器
- Rails控制器操作可以同时处理html和javascript请求吗
- Angular html文件可以'找不到JS控制器[Node.JS/Angular]
- 部分html视图's控制器未使用KendoPanelBar内容URL在指令模板URL中工作
- 将全局变量从控制器调用到HTML视图AngularJS
- 如何在javascript中处理html数组元素,并使用ajax将它们传递给控制器
- 将数据从控制器调用到HTML视图AngularJS
- 无法使用 VM 绑定到范围.控制器/HTML 中的表示法