乐趣区

关于springboot:springbootajax查看直接可以返回查询页面

jiezi

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

}

前端

<!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″>
<link

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 标签, 倡议这样写 

   findActivitys();

//});// 页面加载实现当前执行
</script>
</body>
</html>

配置文件

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

退出移动版