zoukankan      html  css  js  c++  java
  • 异步请求获取JSON数据

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

     1 <input type="button" id="testBtn" value="测试按钮" onclick="sentAjax();"/><br> 3 <script type="text/javascript">
     4 function sentAjax(){
     5     $.ajax({
     6           type: 'POST',
     7           url:"<%=basePath%>/manage/test/ajax",
     8           dataType : "json",
     9           success: function(result){
    10         //这里result是一个符合json格式的js对象
    11              //alert(result.name);
    12               //alert(result[0].name);
    13               //alert(result.listUser[0].name);
    14                     
    15           }
    16         });
    17  }
    18 </script>    

    java代码

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

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

     1 @RequestMapping("/ajax")
     2 @ResponseBody
     3 public Object testAjax1(HttpServletRequest request, HttpServletResponse response){
     4         
     5         String jsonStr1 = "{"name":"张三","age":23}";
     6         String jsonStr2 = "[{"name":"张三","age":1},{"name":"李四","age":24}]";
     7         String jsonStr3 = "{"listUser": [{"name":"张三","age":1},{"name":"李四","age":24}] }";
     8         
     9        return jsonStr1;
    10         
    11     }

    二,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格式的数据进行数据交互更加的方便。它的实现原理如下:

     1 @RequestMapping(value = "/ajax4")
     2     public void testAjax4(HttpServletRequest request, HttpServletResponse response){
     3         
     4        try {
     5             User user = new User();
     6             user.setName("张三");
     7             user.setAge(23);
     8             ObjectMapper mapper = new ObjectMapper();
     9             String userStr = mapper.writeValueAsString(user);
    10             response.setCharacterEncoding("utf-8");//响应字符集的编码格式
    11             response.getWriter().print(userStr);
    12         } catch (IOException e) {
    13             e.printStackTrace();
    14         }
    15     }

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

     1 @RequestMapping(value = "/ajax5")
     2     @ResponseBody
     3     public Object testAjax5(HttpServletRequest request, HttpServletResponse response){
     4         
     5             Map<String,Object> jsonMap = new HashMap();
     6             String jsonStr1 = "{"name":"张三","age":23}";
     7             jsonMap.put("json", jsonStr1);
     8             
     9             return jsonMap;      
    10     }

    前端应该这么写

    <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>
  • 相关阅读:
    jQuery prop方法
    ftp550权限问题
    一个很适合用来套用后台的框架
    Ajax中post方法400和404的问题
    图片上传,直接通过js预览
    JavaScript的DOM扩展
    DevExpress v16.1.5图表、Dashboard等多个控件API发生变化
    MyEclipse 2016正式版更新内容
    Smart Tag——DevExpress WPF初探
    MyEclipse使用心得:集成和使用Maven的方法
  • 原文地址:https://www.cnblogs.com/Nick7/p/10793065.html
Copyright © 2011-2022 走看看