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

6次阅读

共计 1723 个字符，预计需要花费 5 分钟才能阅读完成。

首先管制层代码
@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>

正文完