spring ajax 表格查询,springbootajax查看直接可以返回查询页面

@Controller

@RequestMapping("/activity/")

public class ActivityController {@Autowired

private ActivityService activityService;

@RequestMapping("doSaveObject")

public String doSaveObject(Activity enrity) {

activityService.insertObject(enrity);

return "activity";

}

@RequestMapping("doActivityUI")

public String doActivityUI(){

return "activity";

}

/**查询所有活动信息*/

@RequestMapping("doFindActivitys")

@ResponseBody//以字符串返回值;

public List doFindActivitys() {

List list=activityService.findActivitys();

return list;

}

}前端

rel="stylesheet">

Insert title here

The Activity Page

data-target="#myModal">创建新活动

aria-labelledby="myModalLabel">

aria-label="Close">

×

添加活动

title

class="form-control" name="title" id="titleId"

placeholder="please input title">

Category

class="form-control" name="category" id="category">

教育培训

企业活动

start time

class="form-control" name="startTime" id="startTimeId"

placeholder="please input startTime">

end time

class="form-control" name="endTime" id="endTimeId"

placeholder="please input end time">

Remark

Close

Save

changes

idtitlecategorystart timeend timestatecreatedTime

数据正在积极的加载中......

//点击事件

function doSaveObject(){

$("form").submit();//提交表单 submit

}

//向服务端发送异步请求获取活动信息并更新到页面上

function findActivitys(){

let url="/activity/doFindActivitys";

let params={};

//借助jquery中的ajax函数,向服务端发送异步请求获取活动信息

$.ajax({

url:url,

data:params,

dataType:"json",

success:function(result){

doHandleQueryResult(result);

}

});

};

//处理服务端返回的活动信息,迭代result,并将result内容填充tbody位置

function doHandleQueryResult(result){

///debugger

console.log(result)

//1.获取tbody对象,并清空原有内容

var tBody=$("#tbodyId");//原生写法-document.querySelector("#tbodyId")

tBody.empty();//清空tbody中原有内容

//2.迭代result,将活动信息追加到tbody中

result.forEach((item)=>{//这里的item为一个变量,代表数组中某一个元素

//debugger

tBody.append(

`

${item.id}${item.title}${item.category}${item.startTime}${item.endTime}${item.state==1?'有效':'已结束'}${item.createdTime}`

);

});

}

//jquery中定义的页面加载完整执行方式如下:

// $(function(){//假如所有的js代码放到html页面的head标签,建议这样写findActivitys();

//});//页面加载完成以后执行

配置文件

server

server.port=80

server.servlet.context-path=/

spring datasource

spring.datasource.url=jdbc:mysql:///dbactivity?serverTimezone=GMT%2B8&characterEncoding=utf8

spring.datasource.username=root

spring.datasource.password=dong

spring mybatis

mybatis.mapper-locations=classpath:/mapper//.xml

spring logging

logging.level.com.cy=debug

spring thymeleaf

spring.thymeleaf.prefix=classpath:/templates/modules/

spring.thymeleaf.suffix=.html

spring.thymeleaf.cache=false