异步请求动态加载页面

悠悠 2022-01-27 08:59 377阅读 0赞

最近现在在做的项目需要前后端分离，并且还有一些国际化的原因，需要动态替换页面上的一些元素，我简单的和前端同学说了一下我的思路，但是前端同学貌似没太明白，于是自己写了个demo。

大致思路是这样的：先从异步请求业务系统中取到业务数据，再将业务数据中相关的Code替换成对应的中英文。实现代码如下：

前台代码：

<%@page pageEncoding="UTF-8" contentType="text/html;UTF-8" %>
    <html>
    <head>
        <title>${titleName}</title>
        <script src="/resources/js/jquery-2.1.4.min.js"></script>
    </head>
    <body>
    <table name="dynamicTable" border="1">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>地址</td>
            <td>工种</td>
            <td>类别</td>
        </tr>
    </table>
    <script type="text/javascript">
        $(function(){
            var categorys = {"coder":"程序员","manager":"项目经理"};//这里的数据是要从后台取得，这里先写死了
            var jobs = {"tester":"测试","developer":"开发","qualitier":"质量","product":"产品","design":"设计"};//这里的数据是从后台取得，这里先写死了
            $.ajax({
                type:"GET",
                url:"/get_dynamic_load_page_data.do",//请求业务数据
                dataType:"json",
                success:function (data) {
                    if(data.length > 0){
                        for(var i=0;i<data.length;i++){
                            //拼装业务数据
                            var str = "<tr><td>"+data[i]["userName"]+"</td><td>"+data[i]["age"]+"</td><td>"+data[i]["address"]+"</td><td><input type='hidden' name='jobs' value='"+data[i]["programLanguage"]+"'/></td><td><input type='hidden' name='category' value='"+data[i]["category"]+"'></td></tr>";
                            $('table[name="dynamicTable"]').append(str);//将业务数据渲染到页面上
                        }
                    }
                    //循环上面业务数据，将code替换成相应的值
                    $('input[name="category"]').each(function (i) {
                        $(this).parent("td").append(categorys[$(this).val()]);//替换类别值
                        var job = $('input[name="jobs"]')[i];
                        $(job).parent("td").append(jobs[$(job).val()]);//替换工种
                    });
                },
                error:{
                }
            });
        });
    </script>
    </body>
    </html>

上例中的categorys、jobs可以通过异步请求从后台获取。

后台代码：

package com.zkn.learnspringmvc.news.controller;
    
    import com.sun.org.apache.xpath.internal.operations.Mod;
    import com.zkn.learnspringmvc.domain.UserScope;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.servlet.ModelAndView;
    
    import java.util.ArrayList;
    import java.util.List;
    
    /**
     * Created by zkn on 2016/12/31.
     */
    @Controller
    public class DynamicLoadingPageController {
    
        @RequestMapping("/get_dynamic_load_page.do")
        public ModelAndView getDynamicLoadPage(){
    
            ModelAndView modelAndView = new ModelAndView();
            modelAndView.addObject("titleName","动态加载页面");
            modelAndView.setViewName("dynamicLoadPage");
            return modelAndView;
        }
    
        @RequestMapping("/get_dynamic_load_page_data.do")
        @ResponseBody
        public List<UserScope> getDynamicLoadPageData(){
    
            List<UserScope> list = new ArrayList<UserScope>();
            list.add(new UserScope("张三","海淀区","coder",20,"tester"));
            list.add(new UserScope("李四","天通苑","manager",25,"developer"));
            list.add(new UserScope("王五","昌平区","coder",21,"qualitier"));
            list.add(new UserScope("马六","立水桥","manager",27,"product"));
            list.add(new UserScope("朱八","三元桥","coder",22,"design"));
            return list;
        }
    }

结果如下：

![Center][]

[Center]: /images/20220127/4663d46816404d65bf7f6fff8c186ff0.png