JSON

一、介绍

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

image.png

在JS中，一切都是对象，因此一切JS支持的类型都可以通过JSON来表示（比如传参时可以传JSON文本）

<u>JSON的优势在于前后端分离时数据传输更高效。</u>

二、语法格式

• 对象表示为键值对
• 数据由逗号分隔
• 花括号保存对象
• 方括号保存数组

{"name":"xiaoming"}

{"age":"3"}

{"sex":"male"}

var obj={a:'hello',b:'world'};//这是对象，键名也可以是引号包裹
var json='{"a":"hello","b":"world"}';//这是JSON字符串，本质上是一个字符串

三、JSON与JS对象互转

var obj=JSON.parse('{"a":"hello","b":"world"}');//结果是{a:'hello',b:'world'}
var JSON=JSON.stringify({a:'hello',b:'world'});//结果是对象变为了JSON格式字符串

四、在spring中使用

1.直接返回字符串

@Controller
public class UserController{
    @RequsetMapping("/json1")
    //正常返回会走视图解析器，而json需要返回字符串
    //市面上有许多第三方jar包可以实现这个功能，如fastjson、jackson
    //搜索maven，在maven网站找jackson包导入
    //@ResponseBody将服务器返回的对象转换为json对象响应回去   @RequestBody
    @ResponseBody
    public String json1(){
        //需要一个jackson的对象映射器，就是一个类，使用它可以直接将对象转换为json字符串
        ObjectMapper mapper=new ObjectMapper();
        //要返回的对象
        User user=new User();
        //将java对象转换为json字符串
        String str=mapper.writeValueAsString(user);
        return str;//返回json格式字符串，中文会乱码
    }
}

@Controller
public class UserController{
    //给@RequestMapping加属性解决编码格式
    //修改produces属性即可
    @RequsetMapping(value="/json2",produces="application/json;charset=utf-8") 
    @ResponseBody
    public String json2(){       
        ObjectMapper mapper=new ObjectMapper();      
        User user=new User();     
        String str=mapper.writeValueAsString(user);
        return str;
    }
}

@Controller
public class UserController{
    @RequsetMapping(value="/json3") 
    @ResponseBody
    public String json3(){       
        List<User> list=new ArrayList<>();
        User user1=new User();     
        User user2=new User();      
        list.add(user1);
        list.add(user2);
        
        return new ObjectMapper().writeValueAsString(list);
    }
}

2.时间字符串

@RequsetMapping(value="/time1") 
@ResponseBody
public String json4(){       
    Date date=new Date();
    //问题，时间默认返回的json字符串变成了时间戳的格式：15647115566464，从1970.1.1至今的毫秒数  TimeStamp
  
    
    return new ObjectMapper().writeValueAsString(list);
}

@RequsetMapping(value="/time2") 
@ResponseBody
public String json5(){       
    ObjectMapper mapper=new ObjectMapper();
    //关闭时间戳功能
    mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS,false);
    //时间格式化问题,自定义日期格式对象
    SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
    //让mapper指定时间日期格式为sdf
    mapper.setDateFormat(sdf);
    
    Date date=new Date();
    return mapper.writeValueAsString(date);
}

3.一个工具类

public class JsonUtils{
    public static String getJson(Object object){
        return getJson(object,"yyyy-MM-dd HH:mm:ss");
    }
    
    public static String getJson(Object object,String dateFormat){
        ObjectMapper mapper=new ObjectMapper();            
        mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS,false);  
        SimpleDateFormat sdf=new SimpleDateFormat(dateFormat);                          mapper.setDateFormat(sdf);
        
        try{
            return mapper.writeValueAsString(object);
        }catch(JsonProcessingException e){
            e.printStackTrace();
        }
        return null;
    }
}

@RequsetMapping(value="/time3") 
@ResponseBody
public String json6() throws JsonProcessingException {       
    Date date=new Date();
    return JsonUtils.getJson(date);
}

AJAX

一、介绍

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

这里使用jQuery提供的ajax，本质是XMLHttpRequest（XHR）

image.png

二、使用

$.get(url,data1,success(data2,type));

$.post(url,data1,success(data2,type));

$.ajax(url,data1,success(data2,type));//默认请求方式为get

• url 待载入页面的url地址

• data1 待发送的参数

• success 载入成功时的回调函数

• data2 返回的数据

• type 返回成功还是失败

三、代码

1.简例

@Controller
@RequestMapping("/ajax")
public class AjaxController{
    @RequestMapping("/a1")
    public void ajax(String name,HttpServletResponse reponse) throws IOException{
        if("admin".equals(name)){
            response.getWriter().print("true");
        }else{
            reponse.getWriter().print("false");
        }
        
        
    }
}

<html>
    <head>
        <title>Ajax</title>
        <script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.js"/> 
        <script type="text/javascript">
            function a1(){
                //请求将文本框的值发给服务器，接收服务器返回的数据
                $.ajax({
                    url:" ${pageContext.request.contextPath}/ajax/a1",
                    type:post,
                    data:{"name":$("#textname").val();},
                    success:funtion (data,status){
                    console.log(data);
                    console.log(status);
                }
                });
              
               
            }
        </script>
    </head>
    <body>
        用户名：<input type="text" id="textname" onblur="">
    </body>
</html>

2.登录校验

---

未完待续