easyui是一款輕量級的前端UI框架,提供了眾多實用的組件和插件,其中包括了json調用,用于從后端獲取數據。通過使用easyui的json調用功能,我們無需編寫復雜的ajax請求代碼,只需簡單地配置參數即可獲取數據。
在easyui中,使用json調用需要在datagrid或combobox等組件中配置url屬性,該屬性指向后端提供的獲取數據接口。接口需要以json格式返回數據,如下:
{ "total": 30, "rows": [ { "id": 1, "name": "張三", "age": 25 }, { "id": 2, "name": "李四", "age": 30 }, { "id": 3, "name": "王五", "age": 28 } ] }
其中,total表示總共有多少條數據,rows是具體的數據列表。
在配置datagrid或combobox時,需要設置一些參數來告知easyui如何解析上面的json數據,如下:
$('#dg').datagrid({ url: '${pageContext.request.contextPath}/getList', method: 'get', pagination: true, pageSize: 20, pageList: [20, 50, 100], columns: [[ {field: 'id', title: '編號', width: 50}, {field: 'name', title: '姓名', width: 100}, {field: 'age', title: '年齡', width: 50} ]] });
url屬性為數據接口地址,method屬性為請求方式(get或post),pagination和pageSize用于啟用分頁功能,columns則是表格的列信息。
通過上面的配置,我們就可以實現從后端獲取json數據并渲染到前端頁面中了。