Json&Ajax(异步更新（局部更新）)

1.json

是一种轻量级的数据交换（前端与后端服务器）格式

特点：简单 清晰 易读

其他传输格式：xml 谷歌的pb(pr…Buff,占用空间少，解析性能好)

json示例

json对象

数字类型的值不用引号

字符串类型的用双引号 应用

{
	"id": 100,
	"name": "志恒",
	"age": 18
}

json字符串

{"id":100,"name":"志恒","age":18}

json数组

[{
		"id": 100,
		"name": "志恒",
		"age": 18
	}, {
		"id": 101,
		"name": "吕臣",
		"age": 18
	}

]

json数组作为value

{
	"status": 1,
	"message": "success",
	"data": [{
		"id": 100,
		"name": "志恒",
		"age": 18
	}, {
		"id": 101,
		"name": "吕臣",
		"age": 18
	}]
}

2.json解析

Java json解析

将java对象转换为 json 格式字符串

将json 转换为java 对象

FastJSON解析

1.导入fastjson 依赖

2.测试

    import com.alibaba.fastjson.JSON;
    import com.qfedu.entity.Student;
    
    import java.util.ArrayList;
    import java.util.List;
    
    /**
     * 使用 fastjson 转换java 对象
     */
    public class FastJsonTest {
    
        public static void main(String[] args) {
    
    
    
            Student student = new Student();
    
            student.setId(100);
            student.setName("志恒");
            student.setAge(18);
    
    
            // 将 java 对象转换为json
            String str1 =   JSON.toJSONString(student);
            System.out.println("str1:"+str1);
    
            // \ 是转译字符
            String str2 = "{\"age\":18,\"id\":101,\"name\":\"吕臣\"}";
            //将json  转换为 java 对象
            Student student2 =  JSON.parseObject(str2,Student.class);
            System.out.println("student2:"+student2.getName());
    
    
            ArrayList<Student> studentList = new ArrayList<>();
    
            studentList.add(student);
            studentList.add(student2);
    
    
            // 将Java集合转换为 json 字符串
    
            String studentListStr =   JSON.toJSONString(studentList);
            System.out.println("studentListStr:"+studentListStr);
    
    
            String jsonArray = "[{\"age\":18,\"id\":100,\"name\":\"志恒\"},{\"age\":18,\"id\":101,\"name\":\"吕臣\"}]";
            // 将json 数组转化为 java  集合
            List<Student> students = JSON.parseArray(jsonArray,Student.class);
            System.out.println("students:"+students);
    
        }
    }

Jackson解析

1.导入依赖

import com.fasterxml.jackson.core.type.TypeReference;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.qfedu.entity.Student;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

public class JacksonTest {

    public static void main(String[] args) throws IOException {



        Student student = new Student();

        student.setId(100);
        student.setName("志恒");
        student.setAge(18);

        ObjectMapper objectMapper = new ObjectMapper();

        // 将对象转换为字符串
        String str1 =  objectMapper.writeValueAsString(student);
        System.out.println("str1:"+str1);



        // \ 是转译字符
        String str2 = "{\"age\":18,\"id\":101,\"name\":\"吕臣\"}";
        //将json  转换为 java 对象
        Student student2 =  objectMapper.readValue(str2,Student.class);
        System.out.println("student2:"+student2.getName());



        ArrayList<Student> studentList = new ArrayList<>();

        studentList.add(student);
        studentList.add(student2);


        // 将Java集合转换为 json 字符串

        String studentListStr =   objectMapper.writeValueAsString(studentList);
        System.out.println("studentListStr:"+studentListStr);


        String jsonArray = "[{\"age\":18,\"id\":100,\"name\":\"志恒\"},{\"age\":18,\"id\":101,\"name\":\"吕臣\"}]";
        // 将json 数组转化为 java  集合

        // new TypeReference<ArrayList<Student>>(){} 固定
        List<Student> students =  objectMapper.readValue(jsonArray,new TypeReference<ArrayList<Student>>(){});
        System.out.println("students:"+students);


    }
}

js中json 转换

    <script>

      var str = '{"id":100,"name":"志恒","age":18}';

      var  stu1 =  JSON.parse(str);
      // alert(stu1.id);

      // js 对象
      var stu2 = {
           id:101,
            name:"小明",
           age:18
      }
      // 将 js 对象转换为 json字符串
      var str2 = JSON.stringify(stu2);
      // alert(str2)


      var  arrayStudent = '[{\"age\":18,\"id\":100,\"name\":\"志恒\"},{\"age\":18,\"id\":101,\"name\":\"吕臣\"}]';
      // 将json 数组转化为 js 数据
      var studentList =  JSON.parse(arrayStudent);

      for (var i = 0;i<studentList.length;i++){
        // 遍历 js 数组
        alert("studentname:"+studentList[i].name)
      }

    </script>

3.ajax

ajax一种无需加载整个界面，使用异步请求完成局部数据的更新

示例

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>


    <script>

        function login() {

            // 获取 用户名密码
            //   var  username = document.getElementById("username").value;
            var  username = document.getElementById("username").valueOf().value;
            var  password = document.getElementById("password").valueOf().value;

            // XMLHttpRequest 在ie 6 不支持
            var  xmlHttpRequest = new XMLHttpRequest();


            //获取后台给到数据
            // 监听xmlHttpRequest 请求的状态
            xmlHttpRequest.onreadystatechange = function(){


                // 判断数据 已经返回
                // readyState 代表请求的 状态
                //0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪
                //
                // xmlHttpRequest.status http 响应的状态码  200 服务器请求响应成功
                if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status==200 ){

                   var  str =   xmlHttpRequest.responseText;
                   // alert("str:"+str) ;

                   var responseData = JSON.parse(str);
                   // 将解析出来的 message  在网页中显示出来
                   document.getElementById("message").innerText = responseData.message;

                }

            }


            // method 方法名
            // url 请求路径
            xmlHttpRequest.open("get","LoginServlet?username="+username+"&password="+password);

            // get 请求无需传递数据
            xmlHttpRequest.send();

        }

    </script>
</head>
<body>

<form>
    username:<input type="text" name="username" id="username"> <br>
    password:<input type="password" name="password" id="password"><br>

</form>
<button onclick="login()">登陆</button>


<p id="message"></p>