关于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>

猜你喜欢

转载自blog.csdn.net/qq_34377273/article/details/82469623