如何将服务器端拿到的数据呈现到页面的流程总结

首先控制层代码
@ResponseBody注解告诉spring 框架将返回值对象转换为json格式字符串

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

     @Autowired
     private ActivityService activityService;
     /**
      *     基于此方法返回activity页面
      * @return
      */
     @RequestMapping("doActivityUI")
     public String doActivityUI() {
         return "activity01";
     }
     
      @RequestMapping("doFindActivitys")
     @ResponseBody //告诉spring 框架将返回值对象转换为json格式字符串
     public List<Activity> doFindActivitys()throws Exception{
          Thread.sleep(5000);
         return activityService.findActivitys();
     }
     }

客户端
首先要在<body>标签最下方引入jquery.min.js文件，因为要使用jQuery

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>
    <h1>The Activity page01</h1>
    
    <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>
        <script type="text/javascript">
        //首先是函数的自调用
        (function(){
            //1首先定义url
            let url="/activity/doFindActivitys";
            //2定义参数，这里为空
            let params={};
            //3发送异步请求，这里是采用的是$.ajax（借助jquery中的ajax函数,向服务端发送异步请求获取活动信息）
            $.ajax({
                url:url,//url
                data:params,//参数
                dataType:"json",//字符串格式
                success:function(result){
                    doHandleQueryResult(result);//要将取到的result结果呈现到页面上
                }
                
            });
        })()
        function doHandleQueryResult(result){
             //处理服务端返回的活动信息,迭代result,并将result内容填充tbody位置
             //1.获取tbody对象
            var tBody=$("#tbodyId");
             
            tBody.empty();//并清空原有内容
            //2.迭代result,将活动信息追加到tbody中   
            
            result.forEach(item=>{//这里的item为一个变量,代表数组中某一个元素
                //为tBody中追加新的内容
                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>`    
                        
            );
                
                
            });
            
        }
        
        </script>
</body>
</html>

如何将服务器端拿到的数据呈现到页面的流程总结

随风

引用和评论

Spring AOP事务管理

Vue.js-Vue实例

你可能不知道的图片加载相关知识

手写一个动态海洋和天空效果的vue hooks

使用CSS给标题添加书名号并超出省略

再见 XShell！一款万能通用的终端工具，用完爱不释手！

Koa+Typescript起手式(空环境) 不用每次玩node都要搭环境了！