zoukankan      html  css  js  c++  java
  • blog--用Json来做前后台数据交互

    JavaEE——SpringMVC(8)--处理 JSON:使用 HttpMessageConverter 可做下载

    ajax  $.ajax()方法详解

    使用@ResponseBody注解

    从后台获取List<Blog> 传递给前端。并解析

     @RequestMapping(value = "/testJson", method = RequestMethod.POST)
        public @ResponseBody List<Blog> testJson(HttpServletRequest request){
            String id = request.getParameter( "id" );
            Integer userId = Integer.valueOf( id );
            List<Blog> blog = blogService.findAllBlogByUserId( userId );
    
    
            /*JSONArray jsonArray = JSONArray.fromObject(blog);*/
            /*JSONObject jsonObject = JSONObject.fromObject( blog );*/
            return blog;
        }
    

      

    前端将获取到的List数据解析为想要的格式

    可使用JavaScript JSON.stringify() 来进行

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
    
    <p id="demo"></p>
    <script>
    var str = {"name":"菜鸟教程", "site":"http://www.runoob.com"}
    str_pretty1 = JSON.stringify(str)
    document.write( "只有一个参数情况:" );
    document.write( "<br>" );
    document.write("<pre>" + str_pretty1 + "</pre>" );
    document.write( "<br>" );
    str_pretty2 = JSON.stringify(str, null, 4) //使用四个空格缩进
    document.write( "使用参数情况:" );
    document.write( "<br>" );
    document.write("<pre>" + str_pretty2 + "</pre>" ); // pre 用于格式化输出
    </script>
    
    </body>
    </html>
    

      

    输出结果

    只有一个参数情况:
    {"name":"菜鸟教程","site":"http://www.runoob.com"}
    
    使用参数情况:
    {
        "name": "菜鸟教程",
        "site": "http://www.runoob.com"
    }
    

      

    <button id="blogType">test Json</button>
    <script>
    
        document.getElementById('blogType').addEventListener('click', function () {
            var userId = <%--${sessionScope.user.id};--%>
            $.ajax({
                type: "post",
                url: "/blogType/allBlogType",
                data: {id:JSON.stringify(userId)},
                dataType: "json",
    //            contentType: "application/json",
                success: function(data){
                    $.each(data, function(i, item){
                        var json1 = JSON.stringify(item, null, 4);
                        console.log(json1);
                        $.each(item, function(j, val){
                        });
                    });
                }
            });
        }, false)
    </script>
    

      

    在Controller处

    @Controller
    @RequestMapping("/blogType")
    public class BlogTypeController {
    
        @Autowired
        BlogTypeService blogTypeService;
    
        @RequestMapping(value = "/allBlogType")
        public @ResponseBody List<BlogType> allBlogType(HttpServletRequest request){
            String id = request.getParameter( "id" );
            Integer userId = Integer.parseInt(id);
            List<BlogType> blog =  blogTypeService.allBlogType( userId );
            for(BlogType i : blog){
                System.out.println(i);
            }
            return blog;
        }
    }
    

      

  • 相关阅读:
    修改编译8266NodeMCU固件 打开各种模块以及修改支持智能配网
    3实现8266智能配网并打印出ip地址 8266 lua nodemcu 智能配网 一键配网
    8266 开发环境教程 nodemcu lua开发8266教程 输出世界你好
    代码提交量查询
    antd DatePicker框日期限制
    form表单设置值
    a标签传参数
    css获取页面高度,定位部分信息
    Form自定义校验
    下拉框可输入或输入为下拉框对应的值
  • 原文地址:https://www.cnblogs.com/SkyeAngel/p/8528452.html
Copyright © 2011-2022 走看看