关闭

异步请求动态加载页面

标签: zknxx木叶之荣动态加载页面异步请求前端
637人阅读 评论(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;
    }
}
结果如下:






0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:264139次
    • 积分:3378
    • 等级:
    • 排名:第9989名
    • 原创:107篇
    • 转载:0篇
    • 译文:1篇
    • 评论:63条
    博客专栏
    最新评论