异步请求动态加载页面
2023-03-14 10:23:10 时间
最近现在在做的项目需要前后端分离,并且还有一些国际化的原因,需要动态替换页面上的一些元素,我简单的和前端同学说了一下我的思路,但是前端同学貌似没太明白,于是自己写了个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; } }结果如下:
相关文章
- 轻量级代码生成器加测试数据生成器
- LoadRunner脚本编写
- SQL概述及规范
- MySQL的在线文档
- Sci-Hub生日解封,一次放出233万篇新论文!与出版商十年斗争,开放知识任重道远
- windows 安装 redis 详细步骤
- 深入浅出FlatBuffers原理
- RISC-V MCU开发实战(一) :DHT11
- 如何统一数据分析入口
- 加拿大小哥用树莓派做了一个狗子探测器:实时识别路过的狗子,还能向狗主人“表白”
- 国科大推出可编程硅基光量子计算芯片,实现292个图像的量子漫步模拟,研究登上Science
- Django+Celery学习笔记2——redis异步执行定时任务demo
- 原生安全应声落地,云栖上的最新趋势
- 技术分享 | MySQL 覆盖索引优化案例一则
- 接口测试|HttpRunner获取响应数据&extract提取值到变量
- 多次请求同一数据接口造成数据混乱问题解决办法
- 【阅读】A Comprehensive Survey on Distributed Training of Graph Neural Networks——翻译
- Jmeter 参数化之数据驱动(ddt)
- Django 获取请求参数
- Kroger EDI 850 采购订单报文详解