프런트 엔드 연구 노트 (6) 프런트 엔드 데이터 상호 작용을위한 JSON

JSON이란?

json의 전체 영어 이름은 JavaScript 개체 표기법 인 JavaScript Object Notation입니다.
일반적으로 Java의 일반적인 객체 표현 방법은 다음과 같습니다.

Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");
var p = {
    
    "name":"李四","age":23,"gender":"女"};

js 객체로 표현되는 경우

var p = {
    
    "name":"李四","age":23,"gender":"女"};

Json은 실제로 일종의 js 객체 표현입니다. 이제 JSON은 데이터 전송을 위해 텍스트 정보를 저장하고 교환하는 데 주로 사용됩니다. JSON은 XML보다 작고 빠르며 파싱하기 쉽습니다.

JSON 사용 방법

문법

일반 규칙

데이터는 이름 / 값 쌍에 있습니다 . json 데이터는
따옴표로 묶인 키- 값 쌍으로 구성된 키 (작은 따옴표와 큰 따옴표 모두) 또는 따옴표없이
값 유형 :

  1. 숫자 (정수 또는 부동 소수점)
  2. 문자열 (큰 따옴표)
  3. 논리 값 (true 또는 false)
  4. 배열 (대괄호로 묶음) { "persons": [{}, {}]}
  5. 개체 (중괄호로 묶음) { "address": { "province": "Zhejiang"...}}
  6. Null
    데이터는 쉼표로 구분됩니다 . 여러 키-값 쌍은 쉼표로 구분됩니다.
    중괄호는 객체를 저장합니다 . {}를 사용하여 json 형식을 정의하고
    대괄호를 사용하여 배열을 저장합니다 . []
    는 여러 가지 json 방법을 정의합니다.
window.onload=function () {
    
    
    //基本格式
    var person = {
    
    "name":"zhangsan",age:23,"gender":true};
    alert(person);
    //嵌套格式 {}---->[]
    var persons= {
    
    
        "persons":[
            {
    
    "name":"zhangsan",age:23,"gender":true},
            {
    
    "name":"lisi",age:23,"gender":true},
            {
    
    "name":"wangwu",age:23,"gender":false}
        ]
    };
    alert(persons)
    //嵌套格式 []----->{}
    var ps=[
        {
    
    "name":"zhangsan",age:23,"gender":true},
        {
    
    "name":"lisi",age:23,"gender":true},
        {
    
    "name":"wangwu",age:23,"gender":false}
        ];
    alert(ps);
}

데이터를 얻기위한 JSON

단일 json 객체의 속성 가져 오기

var person = {
    
    "name":"zhangsan",age:23,"gender":true};
let ps1=person.name;
var ps2 = person["name"];
alert(ps2);
alert(ps1);

json 배열의 객체 속성 가져 오기
방법 1 :

var persons= {
    
    
        "persons":[
            {
    
    "name":"zhangsan",age:23,"gender":true},
            {
    
    "name":"lisi",age:23,"gender":true},
            {
    
    "name":"wangwu",age:23,"gender":false}
        ]
    };
    var name = persons.persons[2].name;
    alert(name);

방법 2 :

var ps=[
        {
    
    "name":"wangwu",age:23,"gender":true},
        {
    
    "name":"lisi",age:23,"gender":true},
        {
    
    "name":"wangwu",age:23,"gender":false}
        ];
var ps1= ps[1].name;
alert(ps1);

JSON 순회 데이터

객체 트래버스 :

var person = {
    
    "name":"zhangsan",age:23,"gender":true};
    for(let key in person){
    
    
        //这种获取方式有问题,相当于person.“key”
        alert(key+":"+person[key]);
    }

객체 배열 반복

    //嵌套格式 {}----->[]
    var persons= {
    
    
        "persons":[
            {
    
    "name":"zhangsan",age:23,"gender":true},
            {
    
    "name":"lisi",age:23,"gender":true},
            {
    
    "name":"wangwu",age:23,"gender":false}
        ]
    };
    var ps1 = persons.persons;
    //alert(ps1);
    for (let i = 0; i < ps1.length; i++) {
    
    
        for(let key in ps1[i]){
    
    
            //这种获取方式有问题,相当于person.“key”
            alert(key+":"+ps1[i][key]);
        }
    }
    //嵌套格式 []----->{}
    var ps=[
        {
    
    "name":"zhangsan",age:23,"gender":true},
        {
    
    "name":"lisi",age:23,"gender":true},
        {
    
    "name":"wangwu",age:23,"gender":false}
        ];
    for (let i = 0; i < ps.length; i++) {
    
    
        let p = ps[i];
        for(key in p){
    
    
            alert(key+"-->"+p[key]);
        }
    }

JSON과 JAVA 객체 간의 변환

JSON 파서

일반적인 JSON 파서
JsonLib : JSON은
Gson에서 공식적으로 제공합니다 . Google 회사
fastJson : Alibaba
jackson : spring은 내장형 Json 파서입니다.
jackson은 spring이 내장 된 json 변환 도구이므로 다음은 jackson 관련 메서드에 중점을 둡니다.

JSON—> 자바

  1. jackson 관련 jar 패키지 가져 오기
  2. Jackson 핵심 개체 ObjectMapper 만들기
  3. ObjectMapper의 해당 메소드를 호출하여
    readValue (json string data, Class) 로 변환

자바 —> JSON

사용 단계 :

  1. jackson 관련 jar 패키지 가져 오기
  2. Jackson 핵심 개체 ObjectMapper 만들기
  3. ObjectMapper의 관련 메서드를 호출하여 변환

```java
@Test
    public void test05() throws Exception {
    
    
        //1.初始化JSON字符串
        String json = "{\"gender\":\"男\",\"name\":\"张三\",\"age\":23}";
        //2.创建ObjectMapper对象
        ObjectMapper mapper = new ObjectMapper();
        //3.转换为Java对象 Person对象
        Person person = mapper.readValue(json, Person.class);
        System.out.println(person);
    }

매개 변수 1 :
파일 : obj 객체를 JSON 문자열로 변환하여 지정된 파일에 저장
작성자 : obj 객체를 JSON 문자열로 변환하고 json 데이터를 문자 출력 스트림에 채 웁니다.
OutputStream : obj 객체를 JSON으로 변환 문자열을 입력하고 json 데이터를 바이트 출력 스트림에 채 웁니다.
writeValue (parameter 1, obj) :
writeValueAsString (obj) : 객체를 json 문자열로 변환합니다.

2. 注解:

```java
1. @JsonIgnore:排除属性。
2. @JsonFormat:属性值得格式化
 @JsonFormat(pattern = "yyyy-MM-dd")
  1. 복잡한 자바 객체 변환
    1) 목록 : 배열
    2) 맵 : 객체 형식이 일치 함

사용자 이름 확인

서버에서 응답 한 데이터는 클라이언트에서 사용할 때 json 데이터 형식으로 사용해야합니다. 두 가지 솔루션이 있습니다.

  1. $ .get (type) : 마지막 매개 변수 유형을 "json"으로 지정합니다.
  2. 서버 측에서 MIME 유형 설정
response.setContentType("application/json;charset=utf-8");

프런트 엔드 코드;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script>
        $(function () {
    
    
            $("#username").blur(function () {
    
    
                var username = $(this).val();
                $.get("findUserServlet",{
    
    username:username},function (data) {
    
    
                    let span = $("#s_username");
                    if(data.userExsit){
    
    
                        span.css("color","red");
                        span.html(data.msg);
                    }else {
    
    
                        span.css("color","green");
                        span.html(data.msg);
                    }
                },"json");

            });
        })
    </script>
</head>
<body>
<form>
    <input type="text" id="username" name="username" placeholder="请输入用户名">
    <span id="s_username"></span>
    <br>
    <input type="password" name="password" placeholder="请输入密码"><br>
    <input type="submit" value="注册"><br>
</form>
</body>
</html>

백엔드 코드;

@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
    
    
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    

        String username = request.getParameter("username");
        response.setContentType("text/html;charset=utf-8");
        //response.setContentType("application/json;charset=utf-8");
        Map<String, Object> map = new HashMap<>();
        if("tom".equals(username)){
    
    
            map.put("userExsit",true);
            map.put("msg","此用户太受欢迎更换一个吧......");
        }else{
    
    
            map.put("userExsit",false);
            map.put("msg","用户名可用");
        }
        ObjectMapper mapper = new ObjectMapper();
        mapper.writeValue(response.getWriter(),map);
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
        this.doPost(request, response);
    }
}

작업 결과 :
여기에 사진 설명 삽입
여기에 사진 설명 삽입

추천

출처blog.csdn.net/xueshanfeitian/article/details/110876743