zoukankan      html  css  js  c++  java
  • JSON(四)——异步请求中前后端使用Json格式的数据进行交互

    json格式的数据广泛应用于异步请求中前后端的数据交互,本文主要介绍几种使用场景和使用方法。

    一,json格式字符串

    <input type="button" id="testBtn" value="测试按钮" onclick="sentAjax();"/><br>
    <script type="text/javascript">
    function sentAjax(){
        $.ajax({
              type: 'POST',
              url:"<%=basePath%>/manage/test/ajax",
              dataType : "json",
              success: function(result){
            //这里result是一个符合json格式的js对象
    //alert(result.name); //alert(result[0].name); //alert(result.listUser[0].name); } }); } </script>

    java代码

    @RequestMapping(value = "/ajax")
        public void testAjax(HttpServletRequest request, HttpServletResponse response){
            
           try {
                String jsonStr1 = "{"name":"张三","age":23}";
                String jsonStr2 = "[{"name":"张三","age":1},{"name":"李四","age":24}]";
                String jsonStr3 = "{"listUser": [{"name":"张三","age":1},{"name":"李四","age":24}] }";
                response.setCharacterEncoding("utf-8");//响应字符集的编码格式
                response.getWriter().print(jsonStr3);
            } catch (IOException e) {
                e.printStackTrace();
            }
            
            
        }

    另外使用spring的@ResponseBody这个注解的话还可以这样写

      @RequestMapping("/ajax")
        @ResponseBody
        public Object testAjax1(HttpServletRequest request, HttpServletResponse response){
            
            String jsonStr1 = "{"name":"张三","age":23}";
            String jsonStr2 = "[{"name":"张三","age":1},{"name":"李四","age":24}]";
            String jsonStr3 = "{"listUser": [{"name":"张三","age":1},{"name":"李四","age":24}] }";
            
           return jsonStr1;
            
        }

    二,java对象

    @RequestMapping(value = "/ajax")
        public void testAjax2(HttpServletRequest request, HttpServletResponse response){
            
           try {
                User user = new User();
                user.setName("张三");
                user.setAge(23);
                JSONObject jsonObject =  JSONObject.fromObject(user);
                response.setCharacterEncoding("utf-8");//响应字符集的编码格式
                response.getWriter().print(jsonObject.toString());
            } catch (IOException e) {
                e.printStackTrace();
            }
            
            
        }

    使用以上的方式的话要先把java对象转换成json格式的字符串

    下面使用springmvc的@ResponseBody这个注解,也是在springmvc的web项目开发中经常用到的。

        @RequestMapping(value = "/ajax")
        @ResponseBody
        public Object testAjax3(HttpServletRequest request, HttpServletResponse response){
                User user = new User();
                user.setName("张三");
                user.setAge(23);
                return user;
        }

    在这里@ResponseBody这个注解对于json格式数据的解析用到了jackson这个框架另外它对响应对象response进行了封装,这让我们在异步请求中使用json格式的数据进行数据交互更加的方便。它的实现原理如下:

    @RequestMapping(value = "/ajax4")
        public void testAjax4(HttpServletRequest request, HttpServletResponse response){
            
           try {
                User user = new User();
                user.setName("张三");
                user.setAge(23);
                ObjectMapper mapper = new ObjectMapper();
                String userStr = mapper.writeValueAsString(user);
                response.setCharacterEncoding("utf-8");//响应字符集的编码格式
                response.getWriter().print(userStr);
            } catch (IOException e) {
                e.printStackTrace();
            }
            
            
        }

    另外在使用json格式数据交互时如有以下用法:

    @RequestMapping(value = "/ajax5")
        @ResponseBody
        public Object testAjax5(HttpServletRequest request, HttpServletResponse response){
            
                Map<String,Object> jsonMap = new HashMap();
                String jsonStr1 = "{"name":"张三","age":23}";
                jsonMap.put("json", jsonStr1);
                
                return jsonMap;
            
            
        }

    前段应该这样写:

    <script type="text/javascript">
    function sentAjax(){
        $.ajax({
              type: 'POST',
              url:"<%=basePath%>/manage/test/ajax5",
              dataType : "json",
              success: function(result){
              //result.json取到的只是map在前端转换成json格式js对象时key为'json'对应的字符串的值,在前段json格式的字符串转换成json格式js对象推荐使用 JSON.parse()这个函数。
                  var jsonStr = JSON.parse(result.json);
                  alert(jsonStr.name)
              }
            });
     }
    </script>

    最后说一点,我们作为程序员,研究问题还是要仔细深入一点的。当你对原理了解的有够透彻,开发起来也就得心应手了,很多开发中的问题和疑惑也就迎刃而解了,而且在面对其他问题的时候也可做到触类旁通。当然在开发中没有太多的时间让你去研究原理,开发中要以实现功能为前提,可等项目上线的后,你有大把的时间或者空余的时间,你大可去刨根问底,深入的去研究一项技术,为觉得这对一名程序员的成长是很重要的事情。

  • 相关阅读:
    AWS生产环境Pod挂载不了configmap、secret
    Ant学习
    Springframework3.1源码编译
    MyEclipse10 中增加svn插件
    如何测试java支持的最大内存
    Tomcat中部署后JspFactory报异常的解决方案
    win7x64下安装oraclex64版本后,plsql Developer无法登录的问题
    CentOS6.4安装及配置oracle
    VMWare安装redhat9后上网的的问题
    泛海精灵项目的回顾与反思
  • 原文地址:https://www.cnblogs.com/cdf-opensource-007/p/6399302.html
Copyright © 2011-2022 走看看