异步请求动态加载页面

最新推荐文章于 2023-02-26 21:12:26 发布

木叶之荣

最新推荐文章于 2023-02-26 21:12:26 发布

阅读量5.2k

点赞数

分类专栏： Web 文章标签： zknxx 木叶之荣动态加载页面异步请求前端

本文链接：https://blog.csdn.net/zknxx/article/details/53997926

版权

Web 专栏收录该内容

80 篇文章 3 订阅

订阅专栏

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

结果如下：

木叶之荣

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
异步请求动态加载页面

最近现在在做的项目需要前后端分离，并且还有一些国际化的原因，需要动态替换页面上的一些元素，我简单的和前端同学说了一下我的思路，但是前端同学貌似没太明白，于是自己写了个demo。大致思路是这样的：先从异步请求业务系统中取到业务数据，再将业务数据中相关的Code替换成对应的中英文。实现代码如下：前台代码： ${titleName} 姓名
复制链接

扫一扫