Front-end study notes (6) JSON for front-end data interaction

What is JSON

The full English name of json is JavaScript Object Notation, which is a JavaScript object notation method.
Generally speaking, the common object representation methods in java are:

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

If represented by js object

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

Json is actually a kind of js object representation. JSON is now mostly used for storing and exchanging text information for data transmission. JSON is smaller, faster and easier to parse than XML.

How to use JSON

grammar

General rules

The data is in a name/value pair : json data is a key composed of
key- value pairs, enclosed in quotation marks (both single and double) , or without quotation marks.
Value type:

  1. Number (integer or floating point)
  2. String (in double quotes)
  3. Logical value (true or false)
  4. Array (in square brackets) {"persons":[{},{}]}
  5. Object (in curly brackets) {"address":{"province":"Zhejiang"...}}
  6. Null
    data is separated by commas : multiple key-value pairs are separated by commas.
    Curly brackets save objects : use {} to define json format and
    square brackets to save arrays : []
    define several ways of 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 to get data

Get the properties of a single json object

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

Get the properties of the objects in the json array
Method one:

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);

Method Two:

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 traversal data

Traverse objects:

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

Iterate over an array of objects

    //嵌套格式 {}----->[]
    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]);
        }
    }

Conversion between JSON and JAVA objects

JSON parser

The common JSON parser
JsonLib:JSON is officially provided by
Gson: Google company
fastJson: Alibaba
jackson:spring is a built-in Json parser.
Since jackson is a built-in json conversion tool with spring, the following focuses on jackson related methods.

JSON—>java

  1. Import jackson related jar package
  2. Create Jackson core object ObjectMapper
  3. Call the relevant method of ObjectMapper to convert
    readValue(json string data, Class)

java—>JSON

Steps for usage:

  1. Import jackson related jar package
  2. Create Jackson core object ObjectMapper
  3. Call the relevant methods of ObjectMapper to convert

```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);
    }

Parameter 1:
File: Convert the obj object into a JSON string and save it in the specified file
Writer: Convert the obj object into a JSON string, and fill the json data into the character output stream.
OutputStream: Convert the obj object into JSON String, and fill the json data into the byte output stream
writeValue(parameter 1, obj):
writeValueAsString(obj): convert the object into a json string

2. 注解:

```java
1. @JsonIgnore:排除属性。
2. @JsonFormat:属性值得格式化
 @JsonFormat(pattern = "yyyy-MM-dd")
  1. Complex java object conversion
    1) List: Array
    2) Map: Object format is consistent

Verify username

The data responded by the server should be used as a json data format when used on the client. There are two solutions:

  1. $.get(type): Specify the last parameter type as "json"
  2. Set the MIME type on the server side
response.setContentType("application/json;charset=utf-8");

Front-end code;

<!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>

Backend code;

@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);
    }
}

operation result:
Insert picture description here
Insert picture description here

Guess you like

Origin blog.csdn.net/xueshanfeitian/article/details/110876743