zoukankan      html  css  js  c++  java
  • SpringMVC(四)——JSON数据交互与CRUD

    1.什么是JSON?

    一种轻量级的[纯文本]数据交换格式,相对于XML来说,解析速度更快,占用空间更小,因为XML需要用标签来描述信息。

    对象结构以{}围起来,数组结构以[]围起来,中间都用[,]分开,可以混合在一起形成数据结构,例如

    {
        "id":10086
        "name":"守林鸟"
        "hobby":["乒乓","羽毛","骑行"]
        "address":{
            "country":"中国"
            "city":"广州"
        }
        "job":null
        "single":true
    }

    对象结构解析方式:对象.key;数组结构解析方式:for循环

    Java对象转换JSON:Bean和map->JSON对象、List->JSON数组;

    2.SpringMVC如何处理JSON?

    (1)导入SpringMVC默认相关包:jackson-annotation、jackson-core、jackson-databind

    (2)在springmvc-config.xml开启mvc注解驱动<mvc:annotation-driven/>,作用是自动注册RequestMappingHandlerMapping 和 RequestMappingHandlerAdapter;再配置静态资源的访问映射,<mvc:resources location="/js/" mapping="/js/**" />,表示此配置文件的文件不被前端控制器拦截

    (3)在处理AJAX请求的方法上加上注解@ResponseBody

    (4)将要转换为JSON且响应到客户端的数据,直接作为该方法的返回值返回

    (5)如果前端传送JSON字符串的数据给后端,请求方法里用@RequestBody修饰参数。不同于@RequestParam()可以有多个参数,@RequestBody最多只能有1个。

    (6)要交互的页面中,引入jquery-1.11.3.min.jsp文件,再写一个ajax方法来获取数据

     1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
     2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
     3      "http://www.w3.org/TR/html4/loose.dtd">
     4 <html>
     5 <head>
     6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     7 <title>test_JSON</title>
     8 
     9 <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js" >
    10 </script>
    11 
    12 <script type="text/javascript">
    13 function testJson(){
    14     // 获取输入的用户名和密码
    15     var userid=$("#uid").val();
    16     var username = $("#username").val();
    17     var password = $("#password").val();
    18     $.ajax({
    19         url : "${pageContext.request.contextPath }/testJson",
    20         type : "post", 
    21         // data表示发送的数据
    22         data :JSON.stringify({userid:userid,username:username,password:password}),
    23         // 定义发送请求的数据格式为JSON字符串
    24         contentType : "application/json;charset=UTF-8",
    25         //定义回调响应的数据格式为JSON字符串,该属性可以省略
    26         dataType : "json",
    27         //成功响应的结果
    28         success : function(data){
    29             if(data != null){                    
    30                   alert("您输入的用户序号为:"+data.userid+" 名为:"+data.username+" 密码为:"+data.password);
    31             }
    32         }
    33     });
    34 }
    35 </script>
    36 </head>
    37 
    38 <body>
    39     <form>
    40         序号:<input type="text" name="userid" id="uid"><br />
    41         用户名:<input type="text" name="username" id="username"><br />
    42         密码:<input type="password" name="password" id="password"><br />
    43         <input type="button" value="测试" onclick="testJson()"/> 
    44     </form>
    45 </body>
    46 </html>

    前10行是写死的;testJson()方法结合POJO类设计;15-17行的左边是POJO类的属性名,不可以改,右边${}里对应的是40-42行的<input>的id属性值;19行是设置请求路径对应请求方法的RequestMapping注解路径;22行不要乱改;30行data对应的是15-17的变量名。28-31行表示Json数据不为空就跳出提示框,43行的onclick属性值表示点击后执行testJson()方法。

    在控制器类里写方法处理这个请求,接收Json传来的数据

        @RequestMapping(value="/testJson")
        @ResponseBody
        public User testJson(@RequestBody User user) {
            System.out.println(user);
            return user;
        }

    3.什么是AJAX?

    (1)全称:Asynchronous JavaScript And XML,即异步JavaScript和XML

    (2)是几种技术的融合

    • XHTML和CSS的基于标准的表示技术
    • DOM进行动态显示和交互
    • XML和XSLT进行数据交换和处理
    • XMLHttpRequest进行异步数据检索
    • Javascript将以上技术融合在一起

    (3)简言之

    客户端与服务器,可以在【不必刷新整个浏览器】的情况下,与服务器进行异步通讯的技术。传统的开发技术中,每当用户向服务器发送请求,哪怕有一点点更新都要刷新整个页面,造成后果是降低性能和使得用户操作页面中断。用了AJAX技术之后,实现【局部刷新】。

    4.RESTful风格的CRUD

    RESTful风格就是把请求参数变成请求路径的一种风格,简洁

    以前:localhost:8080/MCV_03/user?userid=1001&name=admin

    现在:localhost:8080/MCV_03/user/1001/admin

    例如一个查询例子,以userid作为请求路径,请求方法处理请求时,接收userid参数,处理完之后,再以josn的格式返回给jsp页面,成功响应的话再做出处理。

        @RequestMapping(value="/user/{userid}",method=RequestMethod.GET)
        @ResponseBody
        public User selectUser(@PathVariable("userid") Integer userid) {
            System.out.println("id="+userid);
            User user=new User();
            user.setUserid(userid);
            if(user.getUserid()==10086) {
                user.setUsername("守林鸟");
                user.setPassword("shouliniao");
            }
            System.out.println(user);
            return user;
        }
    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
         "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>test_JSON</title>
    
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js" >
    </script>
    
    <script type="text/javascript">
    function search(){
        var userid=$("#userid").val();
        alert("hello userid="+userid);
        $.ajax({
            url : "${pageContext.request.contextPath }/user/"+userid,
            type : "get", 
            data :JSON.stringify({userid:userid}),// data表示发送的数据
            contentType : "application/json;charset=UTF-8",// 定义发送请求的数据格式为JSON字符串
            dataType : "json",//定义回调响应的数据格式为JSON字符串,该属性可以省略
            //成功响应的结果
            success : function(data){
                if(data.username != null){                    
                    alert("您查询的用户是:"+data.username);
                }else{
                    alert("不存在id为"+id+"的用户!");
                }
            }
        });
    }
    </script>
    </head>
    
    <body>
        <form>
            序号:<input type="text" name="userid" id="userid"><br />
            <input type="button" value="search" onclick="search()" /> 
        </form>
    </body>
    </html>
  • 相关阅读:
    2020牛客多校第十场C-Decrement on the Tree
    2020牛客多校第九场B- Groundhog and Apple Tree
    2020牛客多校第九场J-The Escape Plan of Groundhog
    2020牛客多校第九场E-Groundhog Chasing Death
    2020牛客多校第八场E-Enigmatic Partition
    2020牛客多校第八场A-All Star Game
    2020牛客多校第八场I-Interseting Computer Game
    2020牛客多校第七场H-Dividing
    2020牛客多校第七场J-Pointer Analysis
    2020牛客多校第七场C-A National Pandemic
  • 原文地址:https://www.cnblogs.com/shoulinniao/p/13087467.html
Copyright © 2011-2022 走看看