本次实例是通过ajax请求后端数据,然后后端将数据返回给前端,需要一个GSON插件(下载地址:https://mvnrepository.com/artifact/com.google.code.gson/gson):
前端代码:
<button id="select">查找类型</button>
后端代码:
@RequestMapping(value = "/test",produces = "text/plain;charset=utf-8"/*防止数据到前端乱码*/)
public String test(Model model){
List<Type> list = typeManagerService.selectType();
model.addAttribute("lists",list);
String att = gson.toJson(list);
第一种方式(for循环):
<script type="text/javascript">
$("#select").click(function () {
contentType: 'application/x-www-form-urlencoded; charset=utf-8',
success:function (data) {
for (var i = 0;i<data.length;i++){
htm+="<tr><td>"+data[i].type_id+"</td><td>"+data[i].type_name+"</td><td>"+data[i].type_describe+"</td></tr>";
第二中方式:$.each():
$.each(selector,function(index,object)):
- selector代表含有json对象的值
- index代表下标数字从0开始
- object代表当前对象
<script type="text/javascript">
$("#select").click(function () {
contentType: 'application/x-www-form-urlencoded; charset=utf-8',
success:function (data) {
$.each(data,function (index,obj) {
htm+="<tr><td>"+obj.type_id+"</td><td>"+obj.type_name+"</td><td>"+obj.type_describe+"</td></tr>";