springbootajax查看直接能够返回查询页面

@Controller
@RequestMapping("/activity/")
public class ActivityController {javascript

@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<Activity> doFindActivitys() {
    List<Activity>  list=activityService.findActivitys();
    return list;
}

}css

前端

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<linkhtml

href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
rel="stylesheet">

<title>Insert title here</title>
</head>
<body>前端

<div class="container">
    <h1>The Activity Page</h1>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-success" data-toggle="modal"
        data-target="#myModal">建立新活动</button>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">添加活动</h4>
                </div>
                <div class="modal-body">

                    <form action="/activity/doSaveObject" method="post">
                        <div class="form-group">
                            <label for="titleId">title</label> <input type="text"
                                class="form-control" name="title" id="titleId"
                                placeholder="please input title">
                        </div>
                        <div class="form-group">
                            <label for="cagegoryId">Category</label> <select
                                class="form-control" name="category" id="category">
                                <option value="training">教育培训</option>
                                <option value="Playing">企业活动</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="startTimeId">start time</label> <input type="text"
                                class="form-control" name="startTime" id="startTimeId"
                                placeholder="please input startTime">
                        </div>
                        <div class="form-group">
                            <label for="endTimeId">end time</label> <input type="text"
                                class="form-control" name="endTime" id="endTimeId"
                                placeholder="please input end time">
                        </div>
                        <div class="form-group">
                            <label for="remarkId">Remark</label>
                            <textarea class="form-control" name="remark" id="remarkId"></textarea>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="doSaveObject()">Save
                        changes</button>
                </div>
            </div>
        </div>
    </div>
    <table class="table">
        <thead>
            <tr>
                <th>id</th>
                <th>title</th>
                <th>category</th>
                <th>start time</th>
                <th>end time</th>
                <th>state</th>
                <th>createdTime</th>
            </tr>
        </thead>
        <tbody id="tbodyId">
            <tr>
                <td colspan="7">数据正在积极的加载中......</td>
            </tr>
        </tbody>
    </table>
</div>

<script type="text/javascript" src="/jquery/jquery.min.js"></script>
<!-- 加载 Bootstrap 的全部 JavaScript 插件。你也能够根据须要只加载单个插件。 -->
<script
    src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
//点击事件
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(
          `<tr>
             <td>${item.id}</td>
             <td>${item.title}</td>
             <td>${item.category}</td>
             <td>${item.startTime}</td>
             <td>${item.endTime}</td>
             <td>${item.state==1?'有效':'已结束'}</td>
             <td>${item.createdTime}</td>
           </tr>`        
        );
    });
}

//jquery中定义的页面加载完整执行方式以下:
// $(function(){//假如全部的js代码放到html页面的head标签,建议这样写java

findActivitys();

//});//页面加载完成之后执行
</script>
</body>
</html>mysql

配置文件

server

server.port=80jquery

server.servlet.context-path=/

spring datasource

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

spring mybatis

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

spring logging

logging.level.com.cy=debugsql

spring thymeleaf

spring.thymeleaf.prefix=classpath:/templates/modules/spring.thymeleaf.suffix=.htmlspring.thymeleaf.cache=false

相关文章
相关标签/搜索