异步请求动态加载页面

原创 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;
    }
}
结果如下:






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

页面优化——js异步加载

同步加载 在介绍js异步加载之前,我们先来看看什么是js同步加载。我们平时最常使用的就是这种同步加载形式: 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止了后续的解析,因此停...
  • chenmoquan
  • chenmoquan
  • 2014年08月06日 22:21
  • 31567

JS异步加载的三种方式

JS同步加载,异步加载,延迟加载,图片懒加载
  • l522703297
  • l522703297
  • 2016年02月27日 12:39
  • 42859

页面滚动时,异步加载的实现

在生产过程中,如果遇到数据提取量大时,会考虑,页面加载完后使用AJAX读取相关信息。而在现在微博中,使用的效果:在加载到文章底部时,使用AJAX加载数据。演示截图:    HTML代码: New...
  • ansencumt
  • ansencumt
  • 2011年06月07日 17:35
  • 12259

使用爬虫抓取网站异步加载数据

什么是异步加载? 向网站进行一次请求,一次只传部分数据。如:有些网页不需要点击下一页,其内容也可以源源不断地加载。 如何发现异步加载? 1、打开浏览器,右键选择“检查” 2、点击“Network...
  • duxu24
  • duxu24
  • 2016年07月15日 13:48
  • 7193

实现网页图片的异步加载

如题。         最近在进行开发的项目中,有一个网页需要使用非常多的图片,那么必须对图片的加载做优化。使用流式加载图片的方法是绝对不行,对服务器的带宽将是非常大的考验,于是,我考虑使用图片的异...
  • killzero
  • killzero
  • 2014年01月03日 14:34
  • 3027

Ajax异步加载web网页数据

html代码 //javascript代码通过id名称写 请选择影院
  • Bruce_shan
  • Bruce_shan
  • 2016年12月26日 17:53
  • 1421

实现网页图片的异步加载

http://blog.csdn.net/killzero/article/details/17788641 如题。         最近在进行开发的项目中,有一个网页需要使用非常多的...
  • qq_25600055
  • qq_25600055
  • 2017年05月08日 14:08
  • 253

页面滚动动态加载数据,页面下拉自动加载内容

$(document).ready(function(){ var range = 50; //距下边界长度/单位px var elemt = ...
  • saindy5828
  • saindy5828
  • 2012年07月17日 17:47
  • 93159

滚动时动态加载页面内容

有些网站的网页内容不是一次性加载完毕的,而是在鼠标向下滚动时动态加载的,这是怎么做到的呢?看下面代码:var loading = false; $(window).scroll(function(){...
  • github_26672553
  • github_26672553
  • 2015年11月11日 15:47
  • 1041

jsp局部刷新页面、异步加载页面方案

jsp局部刷新页面、异步加载页面方案 1.在jsp页面需要刷新的地方增加一个控件 2.新建一个jsp页面:aaa.jsp(用来放置需要刷新的内容) 3.向后台异步请求数据的方式刷新页面,后台返回一个j...
  • u012887385
  • u012887385
  • 2017年01月24日 11:13
  • 3449
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:异步请求动态加载页面
举报原因:
原因补充:

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