异步请求动态加载页面

原创 2017年01月03日 22:44:22

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






版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Ext的异步请求(二级级联动态加载下拉列表)

Ext的异步请求(二级级联动态加载下拉列表)

jquery ztree 异步动态加载

  • 2013-07-30 16:29
  • 142KB
  • 下载

概述 RequireJS是一个工具库,主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块,实现异步或动态加载,从而提高代码的性能和可维护性。它的模块管理遵守AMD规范(Asynchronou

概述 RequireJS是一个工具库,主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块,实现异步或动态加载,从而提高代码的性能和可维护性。它的模块管理遵守AMD规范(Asynch...

动态加载页面

  • 2012-05-01 04:15
  • 507B
  • 下载

ligerui中的tree的异步动态加载数据库例子

原文:http://blog.csdn.net/vazumi/article/details/7063770 在线测试:  http://vazumihost.vip1.kingidc.ne...

页面动态加载效果二

  • 2016-06-01 10:38
  • 160KB
  • 下载

使用LoaderManager管理Loader实现异步动态加载数据

Loader特性对于每个Activity或者Fragment都可用 提供异步加载数据 监视数据资源,当内容改变时重新更新 当配置改变时,自动重新连接最新的cursor,故不需要重新查询数据 Loade...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)