关于Jason封装数据使其在前端展示的简单操作

这个例子是将一个简单的对象封装在Jason中,然后通过servlet发送到服务器中，编写一个前端页面，展示封装在jason中的数据信息：

首先编写servlet：

@WebServlet("/gclass")public class GclassServlet extends BaseServlet {//private IService<Gclass> service = BeanBuilderFactory.serviceBuiler("cn.uaigou.serviceimpl.GclassServiceImpl");/** json测试类封装数据*/public String Test(HttpServletRequest request,HttpServletResponse response)throws Exception{//全局的json对象JsonObject jo = new JsonObject();//在全局json中添加result元素jo.addProperty("result", 1);//创建json数组JsonArray  ja = new JsonArray();//创建数组中的对象元素JsonObject jaObj1 = new JsonObject();jaObj1.addProperty("name", "tom");jaObj1.addProperty("age", 20);//把对象添加到全局json对象jo中ja.add(jaObj1);JsonObject jaObj2 = new JsonObject();jaObj1.addProperty("name", "jack");jaObj1.addProperty("age", 22);//把对象添加到全局json对象jo中ja.add(jaObj1);//把data数组添加到全局json对象中jo.add("message", ja);//像客户端发送封装的json数据response.getWriter().print(jo.toString());return null;}

然后前段中定义一个div框，编写好自己喜欢的css样式，然后在里面用font标签是服务器中的jason数据展示在页面中：

<script type="text/javascript">//获取分类信息的数据$(function(){$.ajax({type:'GET',url:'gclass',dataType:'json',data:'m=Test',success:function(data){var obj = data;var htmlStr = "";if(obj.result == 1){var data = obj.message;for(var i=0;i<data.length;i++){var jaObj = data[i];htmlStr += "<b>姓名：</b><font color='green'>"+jaObj.name+"</font><br>"+"<b>年龄：</b><font color='green'>"+jaObj.age+"</font><br>";}           }$(".my-gclass-body").html(htmlStr);}         });});</script><body><div class=” my-gclass-body”></div></body>

关于Jason封装数据使其在前端展示的简单操作相关推荐

【时序数据库InfluxDB】Windows环境下配置InfluxDB+数据可视化，以及使用 C#进行简单操作的代码实例...
前言:如题.直接上手撸,附带各种截图,就不做介绍了. 1.influxDB的官网下载地址 https://portal.influxdata.com/downloads/ 打开以后,如下图所示,可以 ...
前端 json数据转txt文本并下载(前端自定义封装数据并下载文件)
前端 json数据转txt文本并下载在工作中,有一次客户要求将图形化的数据转化为txt文件下载本例中也可前端自定义封装数据并下载文件其后端传来的数据为json格式,需要前端转化为text数据的形 ...
vue移动端用什么数据可视化插件_前端必看的数据可视化入门指南
作者:董晓庆蚂蚁金服体验技术部这是一篇给大家提供数据可视化开发的入门指南,介绍了可视化要解决的问题和可以直接使用的工具,我将从下面几个方面给大家介绍,同时以阿里/蚂蚁的可视化团队和资源举例说明: ...
phpcms v9 sql数据{$r[content]}，前端如何换行显示？
已解决:phpcms sql数据{$r[content]},前端如何换行显示一.效果图 · 前后对比: 1. [解决前] 问题场景 · 如下图所示: 2. [解决后]效果截图: 2. 问题: 问1: ...
前端和后端怎么进行数据交互的_前端VS后端
前言对于广义上的前端来说,上游是接口, 下游是界面. 对于后端来说,上游是数据库, 下游是接口. 前端的工作的核心是交互,消费接口的数据,给到用户.我们分别来看这几个方面:前端能够抵达的最上游是接口 ...
利用viewbag把数据对象传到前端并转换成json对象，及解决json字符串被转义问题
利用viewbag把数据对象传到前端并转换成json对象,及解决json字符串被转义问题参考文章: (1)利用viewbag把数据对象传到前端并转换成json对象,及解决json字符串被转义问题 ( ...
AE导出JSON数据用CSS做前端交互---kalrry
AE导出JSON数据用CSS做前端交互---kalrry 一.简介二.准备三.例子四.参考一.简介关于网页端动画实现 web端做动画有多种形式,可以用CSS的animation,也可以用Ca ...
Javaweb8==未实现前后端分离的列表展示、新增、删除、修改功能。 servlet（逻辑处理，封装数据进域对象，转发到jsp）+jsp（el表达式获取域对象中的数据+JSTL替换if for）。
最终环境配置: IDEA2021+JDK8+mysql connector java5+Mysql5+mybatis3.5:从数据库取出数据. +(servlet+jsp+el表达式jstl):ser ...
用下面的scanf 函数输人数据,使a=3,b=7,x=8.5,y=71
用下面的scanf 函数输人数据,使a=3,b=7,x=8.5,y=71. 82,cl='A',c2='a'.在键盘上应如何输入? #include<stdio.h> int main() ...

关于Jason封装数据使其在前端展示的简单操作

关于Jason封装数据使其在前端展示的简单操作相关推荐

最新文章

热门文章