目錄

一、ajax

1. 概念

2. 實(shí)現(xiàn)方式

?? （1）原生的JS實(shí)現(xiàn)方式（了解）??

?? ?（2） JQeury實(shí)現(xiàn)方式

二、axios?

1.?axios 介紹

2.?axios特點(diǎn)

3. 官方文檔

4. axios使用

（1） axios的基本使用（發(fā)送get/post請(qǐng)求）

（2）axios基本使用-獲取數(shù)據(jù)

（3）axios基本使用-傳參

（4）axios基本使用-發(fā)布書籍

（5）axios基本使用-全局配置

（6）axios驗(yàn)證用戶名稱是否存在

三、json

1. 概念

2. 語(yǔ)法

? ? ?(1)? ?基本規(guī)則

???（2）獲取數(shù)據(jù)

3.? JSON數(shù)據(jù)和Java對(duì)象的相互轉(zhuǎn)換

?? ?（1）JSON轉(zhuǎn)為Java對(duì)象（jackson）

? ? （2） Java對(duì)象轉(zhuǎn)換JSON（jackson）

? ??（3）fastjson用法

一、ajax

Ajax即Asynchronous Javascript And XML（異步JavaScript和XML）在 2005年被Jesse James Garrett提出的新術(shù)語(yǔ)，用來(lái)描述一種使用現(xiàn)有技術(shù)集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3] 使用Ajax技術(shù)網(wǎng)頁(yè)應(yīng)用能夠快速地將增量更新呈現(xiàn)在用戶界面上，而不需要重載（刷新）整個(gè)頁(yè)面，這使得程序能夠更快地回應(yīng)用戶的操作。

參考 原生ajax：AJAX 簡(jiǎn)介 | 菜鳥教程

1. 概念

? ? ? ?ASynchronous JavaScript And XML?? ?異步的JavaScript 和 XML

? ? ? ?同步和異步：客戶端和服務(wù)器端相互通信的基礎(chǔ)上
?? ??? ?* 同步：客戶端必須等待服務(wù)器端的響應(yīng)。在等待的期間客戶端不能做其他操作。
?? ??? ?* 異步：客戶端不需要等待服務(wù)器端的響應(yīng)。在服務(wù)器處理請(qǐng)求的過(guò)程中，客戶端可以進(jìn)行其他的操作。

?? ??? ?Ajax 是一種在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下，能夠更新部分網(wǎng)頁(yè)的技術(shù)。
?? ??? ?通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，Ajax 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。
?? ??? ?傳統(tǒng)的網(wǎng)頁(yè)（不使用 Ajax）如果需要更新內(nèi)容，必須重載整個(gè)網(wǎng)頁(yè)頁(yè)面。

?? ??? ?提升用戶的體驗(yàn)

2. 實(shí)現(xiàn)方式

?? （1）原生的JS實(shí)現(xiàn)方式（了解）??

? //1.創(chuàng)建核心對(duì)象
?? ? var xmlhttp;
?? ? if (window.XMLHttpRequest)
?? ? ??{// code for IE7+, Firefox, Chrome, Opera, Safari
?? ? ? ? ?xmlhttp=new XMLHttpRequest();
?? ? ??}
?? ? ?else
?? ? ? ? ??{// code for IE6, IE5
?? ? ? ? ?xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
?? ? ? ? }


  //2. 建立連接
/*
?? 參數(shù)：
?? 1. 請(qǐng)求方式：GET、POST
?? ? ? * get方式，請(qǐng)求參數(shù)在URL后邊拼接。send方法為空參
?? ? ? * post方式，請(qǐng)求參數(shù)在send方法中定義
?? 2. 請(qǐng)求的URL：
?? 3. 同步或異步請(qǐng)求：true（異步）或 false（同步）
?? ?
?? ? */
?? ? ? ? ? ? ? ?xmlhttp.open("GET","ajaxServlet?username=tom",true);
?? ?
?//3.發(fā)送請(qǐng)求
?? ? ? ? ? ? ? ?xmlhttp.send();
?? ?
//4.接受并處理來(lái)自服務(wù)器的響應(yīng)結(jié)果
?? ? ? ? ? ? ? ?//獲取方式 ：xmlhttp.responseText
?? ? ? ? ? ? ? ?//什么時(shí)候獲取？當(dāng)服務(wù)器響應(yīng)成功后再獲取
?? ?
?? ? ? ? ? ? ? ?//當(dāng)xmlhttp對(duì)象的就緒狀態(tài)改變時(shí)，觸發(fā)事件onreadystatechange。
?? ? ? ? ? ? ? ?xmlhttp.onreadystatechange=function()
?? ? ? ? ? ? ? ?{
?? ? ? ? ? ? ? ? ? ?//判斷readyState就緒狀態(tài)是否為4，判斷status響應(yīng)狀態(tài)碼是否為200
?? ? ? ? ? ? ? ? ? ?if (xmlhttp.readyState==4 && xmlhttp.status==200)
?? ? ? ? ? ? ? ? ? ?{
?? ? ? ? ? ? ? ? ? ? ? //獲取服務(wù)器的響應(yīng)結(jié)果
?? ? ? ? ? ? ? ? ? ? ? ?var responseText = xmlhttp.responseText;
?? ? ? ? ? ? ? ? ? ? ? ?alert(responseText);
?? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ?}

?? ?（2） JQeury實(shí)現(xiàn)方式

? ? ? ?a.? $.ajax()

?? ??? ??? ?* 語(yǔ)法：$.ajax({鍵值對(duì)});

 ?             //使用$.ajax()發(fā)送異步請(qǐng)求
?? ? ? ? ? ? ? ?$.ajax({
?? ? ? ? ? ? ? ? ? ?url:"ajaxServlet1111" , // 請(qǐng)求路徑
?? ? ? ? ? ? ? ? ? ?type:"POST" , //請(qǐng)求方式
?? ? ? ? ? ? ? ? ? ?//data: "username=jack&age=23",//請(qǐng)求參數(shù)
?? ? ? ? ? ? ? ? ? ?data:{"username":"jack","age":23},
?? ? ? ? ? ? ? ? ? ?success:function (data) {
?? ? ? ? ? ? ? ? ? ? ? ?alert(data);
?? ? ? ? ? ? ? ? ? ?},//響應(yīng)成功后的回調(diào)函數(shù)
?? ? ? ? ? ? ? ? ? ?error:function () {
?? ? ? ? ? ? ? ? ? ? ? ?alert("出錯(cuò)啦...")
?? ? ? ? ? ? ? ? ? ?},//表示如果請(qǐng)求響應(yīng)出現(xiàn)錯(cuò)誤，會(huì)執(zhí)行的回調(diào)函數(shù)
?? ?
?? ? ? ? ? ? ? ? ? ?dataType:"text"http://設(shè)置接受到的響應(yīng)數(shù)據(jù)的格式
?? ? ? ? ? ? ? ?});

?? ??? ?b. $.get()：發(fā)送get請(qǐng)求

?? ??? ??? ?* 語(yǔ)法：$.get(url, [data], [callback], [type])
?? ??? ??? ??? ?* 參數(shù)：
?? ??? ??? ??? ??? ?* url：請(qǐng)求路徑
?? ??? ??? ??? ??? ?* data：請(qǐng)求參數(shù)
?? ??? ??? ??? ??? ?* callback：回調(diào)函數(shù)
?? ??? ??? ??? ??? ?* type：響應(yīng)結(jié)果的類型

?c.? $.post()：發(fā)送post請(qǐng)求
?? ??? ??? ?* 語(yǔ)法：$.post(url, [data], [callback], [type])
?? ??? ??? ??? ?* 參數(shù)：
?? ??? ??? ??? ??? ?* url：請(qǐng)求路徑
?? ??? ??? ??? ??? ?* data：請(qǐng)求參數(shù)
?? ??? ??? ??? ??? ?* callback：回調(diào)函數(shù)
?? ??? ??? ??? ??? ?* type：響應(yīng)結(jié)果的類型

二、axios?

1.?axios 介紹

（1）axios 是一個(gè)專注于網(wǎng)絡(luò)請(qǐng)求的庫(kù)，核心負(fù)責(zé)發(fā)請(qǐng)求和拿數(shù)據(jù)

（2）axios，是一個(gè)基于promise的網(wǎng)絡(luò)請(qǐng)求庫(kù)，作用于node.js和瀏覽器中，它是 isomorphic 的(即同一套代碼可以運(yùn)行在瀏覽器和node.js中)。在服務(wù)端它使用原生node.js http模塊, 而在客戶端 (瀏覽端) 則使用XMLHttpRequest。

2.?axios特點(diǎn)

• 支持客戶端發(fā)送Ajax請(qǐng)求

• 支持服務(wù)端Node.js發(fā)送請(qǐng)求

• 支持Promise相關(guān)用法

• 支持請(qǐng)求和響應(yīng)的攔截器功能

• 自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)

• axios 底層還是原生js實(shí)現(xiàn), 內(nèi)部通過(guò)Promise封裝的

3. 官方文檔

axios文檔http://www.axios-js.com/

Axios 中文文檔 | Axios 中文網(wǎng) | Axios 是一個(gè)基于 promise 的網(wǎng)絡(luò)請(qǐng)求庫(kù)，可以用于瀏覽器和 node.js

4. axios使用

（1） axios的基本使用（發(fā)送get/post請(qǐng)求）

引入: 下載axios, 引入后才能使用

頁(yè)面引入axios cdn依賴

?<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios({
  method: '請(qǐng)求方式', // get post
  url: '請(qǐng)求地址',
  data: {    // 拼接到請(qǐng)求體的參數(shù),  post請(qǐng)求的參數(shù)
    xxx: xxx,
  },
  params: {  // 拼接到請(qǐng)求行的參數(shù), get請(qǐng)求的參數(shù)
   	xxx: xxx 
  }
}).then(res => {
  console.log(res.data) // 后臺(tái)返回的結(jié)果
}).catch(err => {
  console.log(err) // 后臺(tái)報(bào)錯(cuò)返回
})

 

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>axios</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        function mayiktAxios() {
            // 1. 調(diào)用 axios 方法得到的返回值是 Promise 對(duì)象
            axios({
                // 請(qǐng)求方式
                method: 'GET',
                // 請(qǐng)求的地址
                url: 'http://localhost:8080/${pageContext.request.contextPath}/axiosServlet',
                // URL 中的查詢參數(shù)
                params: {
                    name: "mayikt",
                    age: 22
                }
            }).then(function (result) {
                alert(result.data);
            })

        }
    </script>
</head>
<body>

<input type="button" value="發(fā)送ajax" onclick="mayiktAxios()"/>

</body>
</html>

@WebServlet("/axiosServlet")
public class AxiosServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
    
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        PrintWriter writer = resp.getWriter();
        String name = req.getParameter("name");
        String age = req.getParameter("age");
        writer.print("mayikt,name:" + name + ",age:" + age);
        writer.close();
    }
}

（2）axios基本使用-獲取數(shù)據(jù)

?

<template>
  <div>
    <p>1. 獲取所有圖書信息</p>
    <button @click="getAllFn">點(diǎn)擊-查看控制臺(tái)</button>
  </div>
</template>

<script>
// 目標(biāo)1: 獲取所有圖書信息
// 1. 下載axios
// 2. 引入axios
// 3. 發(fā)起axios請(qǐng)求
import axios from "axios";
export default {
  methods: {
    getAllFn() {
      axios({
        url: "http://123.57.109.30:3006/api/getbooks",
        method: "GET", // 默認(rèn)就是GET方式請(qǐng)求, 可以省略不寫
      }).then((res) => {
        console.log(res);
      });
      // axios()-原地得到Promise對(duì)象
    },
  }
};
</script>

（3）axios基本使用-傳參

?

<template>
  <div>
    <p>2. 查詢某本書籍信息</p>
    <input type="text" placeholder="請(qǐng)輸入要查詢 的書名" v-model="bName" />
    <button @click="findFn">查詢</button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      bName: ""
    };
  },
  methods: {
    // ...省略了查詢所有的代碼
    findFn() {
      axios({
        url: "/api/getbooks",
        method: "GET",
        params: { // 都會(huì)axios最終拼接到url?后面
            bookname: this.bName
        }
      }).then(res => {
          console.log(res);
      })
    }
  },
};
</script>

（4）axios基本使用-發(fā)布書籍

目標(biāo): 完成發(fā)布書籍功能

功能: 點(diǎn)擊新增按鈕, 把用戶輸入的書籍信息, 傳遞給后臺(tái) – 把結(jié)果打印在控制臺(tái)

?

<template>
  <div>
    <p>3. 新增圖書信息</p>
    <div>
        <input type="text" placeholder="書名" v-model="bookObj.bookname">
    </div>
    <div>
        <input type="text" placeholder="作者" v-model="bookObj.author">
    </div>
    <div>
        <input type="text" placeholder="出版社" v-model="bookObj.publisher">
    </div>
    <button @click="sendFn">發(fā)布</button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      bName: "",
      bookObj: { // 參數(shù)名提前和后臺(tái)的參數(shù)名對(duì)上-發(fā)送請(qǐng)求就不用再次對(duì)接了
          bookname: "",
          author: "",
          publisher: ""
      }
    };
  },
  methods: {
    // ...省略了其他代碼
    sendFn(){
       axios({
           url: "/api/addbook",
           method: "POST",
           data: {
               appkey: "7250d3eb-18e1-41bc-8bb2-11483665535a",
               ...this.bookObj
            // 等同于下面
            // bookname: this.bookObj.bookname,
            // author: this.bookObj.author,
            // publisher: this.bookObj.publisher
           }
       }) 
    }
  },
};
</script>

（5）axios基本使用-全局配置

目標(biāo): 避免前綴基地址, 暴露在邏輯頁(yè)面里, 統(tǒng)一設(shè)置

axios.defaults.baseURL = "http://123.57.109.30:3006"

// 所有請(qǐng)求的url前置可以去掉, 請(qǐng)求時(shí), axios會(huì)自動(dòng)拼接baseURL的地址在前面
getAllFn() {
    axios({
        url: "/api/getbooks",
        method: "GET", // 默認(rèn)就是GET方式請(qǐng)求, 可以省略不寫
    }).then((res) => {
        console.log(res);
    });
    // axios()-原地得到Promise對(duì)象
},

（6）axios驗(yàn)證用戶名稱是否存在

需求：當(dāng)我們用戶輸入用戶名稱之后（會(huì)使用ajax驗(yàn)證用戶名稱是否已經(jīng)存在 如果存在的話 則提示 該用戶名稱是已經(jīng)存在的）

onkeyup---監(jiān)聽用戶輸入完內(nèi)容 走監(jiān)聽方法

@WebServlet("/exUserNameServlet")
public class ExUserNameServlet extends HttpServlet {
    
    private MayikUsertService mayikUsertService = new MayikUsertService();
    
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        //1.獲取到用戶輸入的userName參數(shù)值
        String userName = req.getParameter("userName");
        //2.調(diào)用數(shù)據(jù)庫(kù)根據(jù)userName查詢用戶名稱是否存在
        MayiktUserEntity mayiktUserEntity = mayikUsertService.findByUserName(userName);
        PrintWriter writer = resp.getWriter();
        if (mayiktUserEntity != null) {
            writer.print("該用戶" + userName + "已經(jīng)存在的 無(wú)法注冊(cè)!");
        }
        writer.close();
    }
}

<%--
  Created by IntelliJ IDEA.
  User: mayikt
  Date: 2022/6/6
  Time: 17:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>注冊(cè)頁(yè)面</title>
    <form action="/mayikt_session_war_exploded/register" method="post">
        <label>用戶名: </label><input type="text" name="userName" onkeyup="mayiktAxios(this)"/><br>
        <label>密&nbsp&nbsp&nbsp碼: </label><input type="password" name="userPwd"/><br>
        <label>驗(yàn)證碼: </label><input type="text" name="code"/><img id="exchangecode" src="VerifycodeServlet">
        <a id="ecode" href="#">看不清？換一張圖片</a><br>
        <span id="error" style="color: red">${errorMsg}</span>
        <input type="submit" value="注冊(cè)"/>
    </form>
    <script type="text/javascript">
        window.onload = function () {
            //獲取img標(biāo)簽的對(duì)象
            img = document.getElementById("exchangecode");
            img.onclick = function () {
                //加時(shí)間戳,避免瀏覽器緩存
                var date = new Date().getTime()
                img.src = "VerifycodeServlet?" + date;
            }
            //獲取a標(biāo)簽的對(duì)象
            ec = document.getElementById("ecode");
            ec.onclick = function () {
                //加時(shí)間戳
                var date = new Date().getTime()
                img.src = "VerifycodeServlet?" + date;
            }
        }

    </script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        function mayiktAxios(object) {
            // 1.接受用戶輸入的userName
            var userName = object.value;
            // 2.使用Axios 發(fā)送ajax請(qǐng)求驗(yàn)證 userName是否存在的
            axios({
                // 請(qǐng)求方式
                method: 'GET',
                // 請(qǐng)求的地址
                url: 'http://localhost:8080${pageContext.request.contextPath}/exUserNameServlet',
                // URL 中的查詢參數(shù)
                params: {
                    userName: userName,
                }
            }).then(function (result) {
                //定位 span  id 名稱 error 修改
                document.getElementById("error").innerText = result.data;
            })
        }
    </script>
</head>
</html>

三、json

1. 概念

? ? JavaScript Object Notation?? ??? ?JavaScript對(duì)象表示法

?? ?Person p = new Person();
?? ?p.setName("張三");
?? ?p.setAge(23);
?? ?p.setGender("男");

?? ?var p = {"name":"張三","age":23,"gender":"男"};

?? ?* json現(xiàn)在多用于存儲(chǔ)和交換文本信息的語(yǔ)法
?? ?* 進(jìn)行數(shù)據(jù)的傳輸
?? ?* JSON 比 XML 更小、更快，更易解析。

2. 語(yǔ)法

? ? ?(1)? ?基本規(guī)則

?? ??? ?* 數(shù)據(jù)在名稱/值對(duì)中：json數(shù)據(jù)是由鍵值對(duì)構(gòu)成的
?? ??? ??? ?* 鍵用引號(hào)(單雙都行)引起來(lái)，也可以不使用引號(hào)
?? ??? ??? ?* 值得取值類型：
?? ??? ??? ??? ?1. 數(shù)字（整數(shù)或浮點(diǎn)數(shù)）
?? ??? ??? ??? ?2. 字符串（在雙引號(hào)中）
?? ??? ??? ??? ?3. 邏輯值（true 或 false）
?? ??? ??? ??? ?4. 數(shù)組（在方括號(hào)中）?? ?{"persons":[{},{}]}
?? ??? ??? ??? ?5. 對(duì)象（在花括號(hào)中） {"address":{"province"："陜西"....}}
?? ??? ??? ??? ?6. null
?? ??? ?* 數(shù)據(jù)由逗號(hào)分隔：多個(gè)鍵值對(duì)由逗號(hào)分隔
?? ??? ?* 花括號(hào)保存對(duì)象：使用{}定義json 格式
?? ??? ?* 方括號(hào)保存數(shù)組：[]

???（2）獲取數(shù)據(jù)

? ? ? ? a. json對(duì)象.鍵名
? ? ? ? b. json對(duì)象["鍵名"]
? ? ? ? c. 數(shù)組對(duì)象[索引]
? ? ? ? d. 遍歷
?? ??? ??? ??? ? //1.定義基本格式
?? ??? ? ? ? ? ?var person = {"name": "張三", age: 23, 'gender': true};??

?var ps = [{"name": "張三", "age": 23, "gender": true},
?? ??? ? ? ? ? ? ? ?{"name": "李四", "age": 24, "gender": true},
?? ??? ? ? ? ? ? ? ?{"name": "王五", "age": 25, "gender": false}];

? ? ?//獲取ps中的所有值
?? ??? ? ? ? ? ?for (var i = 0; i < ps.length; i++) {
?? ??? ? ? ? ? ? ? ?var p = ps[i];
?? ??? ? ? ? ? ? ? ?for(var key in p){
?? ??? ? ? ? ? ? ? ? ? ?alert(key+":"+p[key]);
?? ??? ? ? ? ? ? ? ?}
?? ??? ? ? ? ? ?}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonDemo</title>
    <script>
        // 1.定義json
        var json1 = {name: "mayikt", age: 22, isFlag: true};
        alert(json1.name);
        alert(json1.age);
        alert(json1.isFlag);
        // 2.定義json數(shù)組
        var jsonArr = {code: 200, data: [{name: "mayikt", age: 22}, {name: "meite", age: 22}]};
        alert(jsonArr.code);
        alert(jsonArr.data[0].name);
        var userArr = jsonArr.data;
        for (var i = 0; i < userArr.length; i++) {
            alert(userArr[i].name + "," + userArr[i].age);
        }
    </script>
</head>
<body>

</body>
</html>

3.? JSON數(shù)據(jù)和Java對(duì)象的相互轉(zhuǎn)換

?? ?* JSON解析器：
?? ??? ?* 常見的解析器：Jsonlib，Gson，jackson? ?，?fastjson

?? ?（1）JSON轉(zhuǎn)為Java對(duì)象（jackson）

? ? ? ? （1）?導(dǎo)入jackson的相關(guān)jar包
? ? ? ? （2）創(chuàng)建Jackson核心對(duì)象 ObjectMapper
?? ??? ?（3）調(diào)用ObjectMapper的相關(guān)方法進(jìn)行轉(zhuǎn)換
? ? ? ? ? ? ? ? ? readValue(json字符串?dāng)?shù)據(jù),Class)

?

?? （2） Java對(duì)象轉(zhuǎn)換JSON（jackson）

? ? ? ? ? 使用步驟：

? ? ? ? ? ? a. 導(dǎo)入jackson的相關(guān)jar包
? ? ? ? ? ? b. 創(chuàng)建Jackson核心對(duì)象 ObjectMapper
? ? ? ? ? ? c. 調(diào)用ObjectMapper的相關(guān)方法進(jìn)行轉(zhuǎn)換
?? ??? ??? ??? ?（a） 轉(zhuǎn)換方法：

(1) mapper.writeValueAsString(obj):將對(duì)象轉(zhuǎn)為json字符串?

(2) mapper.writeValue(參數(shù)1，obj):
?? ?參數(shù)1：
?? ? ? ? File：將obj對(duì)象轉(zhuǎn)換為JSON字符串，并保存到指定的文件中
?? ? ? ? Writer：將obj對(duì)象轉(zhuǎn)換為JSON字符串，并將json數(shù)據(jù)填充到字符輸出流中
?? ? ? ? OutputStream：將obj對(duì)象轉(zhuǎn)換為JSON字符串，并將json數(shù)據(jù)填充到字節(jié)輸出流中

?

（b）注解：

? ? @JsonIgnore：排除屬性。
? ? @JsonFormat：屬性值得格式化

??@JsonIgnore:轉(zhuǎn)換后直接不顯示

?

?

@JsonFormat(pattern = "yyyy-MM-dd")

（c）復(fù)雜java對(duì)象轉(zhuǎn)換
? ? ? ? ? ? ? ? ? ? ?List：數(shù)組
? ? ? ? ? ? ? ? ? ? ?Map：對(duì)象格式一致

（3）fastjson用法

文檔：javaweb開發(fā)相關(guān)資料下載.notea

鏈接：有道云筆記

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-611471.html

public class Test01 {
    public static void main(String[] args) {
        //1.將數(shù)據(jù)對(duì)象變成json（字符串類型）
        MayiktUserEntity user1 = new MayiktUserEntity(1, "mayikt", "mayikt");
        MayiktUserEntity user2 = new MayiktUserEntity(1, "mayikt", "mayikt");
        String json1 = JSONObject.toJSONString(user1);
        System.out.println(json1);
        //2.嵌套json
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("code", 200);
        jsonObject.put("msg", "ok");
        //data值 數(shù)組類型
        ArrayList<MayiktUserEntity> mayiktUserEntities = new ArrayList<>();
        mayiktUserEntities.add(user1);
        mayiktUserEntities.add(user2);
        jsonObject.put("data", mayiktUserEntities);
        System.out.println(jsonObject.toJSONString());
    }
}


public class Test02 {
    public static void main(String[] args) {
        String jsonStr = "{\"msg\":\"ok\",\"code\":200,\"data\":[{\"id\":1,\"userName\":\"mayikt\",\"userPwd\":\"mayikt\"},{\"id\":1,\"userName\":\"mayikt\",\"userPwd\":\"mayikt\"}]}";
        // string類型-----jsonobject----jsonobject
        JSONObject jsonObject = JSONObject.parseObject(jsonStr);
//        Integer code = (Integer) jsonObject.get("code");
        Integer code = jsonObject.getInteger("code");
        String msg = jsonObject.getString("msg");
        System.out.println(code + "," + msg);
        JSONArray data = jsonObject.getJSONArray("data");
        for (int i = 0; i < data.size(); i++) {
            JSONObject object = (JSONObject) data.get(i);
            Integer id = object.getInteger("id");
            String userName = object.getString("userName");
            String userPwd = object.getString("userPwd");
            MayiktUserEntity mayiktUserEntity = new MayiktUserEntity(id, userName, userPwd);
            System.out.println(mayiktUserEntity);
        }
    }
}

public class Test03 {
    public static void main(String[] args) {
        String jsonStr = "{\"msg\":\"ok\",\"code\":200,\"data\":[{\"id\":1,\"userName\":\"mayikt\",\"userPwd\":\"mayikt\"},{\"id\":1,\"userName\":\"mayikt\",\"userPwd\":\"mayikt\"}]}";
        JSONObject jsonObject = JSONObject.parseObject(jsonStr);
        Result result = JSONObject.parseObject(jsonStr, Result.class);
        // java序列化技術(shù) 將 json變成對(duì)象
        System.out.println(result);
    }
}

public class Result {
    private Integer code;
    private String msg;
    private List<MayiktUserEntity> data;

    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }


    public List<MayiktUserEntity> getData() {
        return data;
    }

    public void setData(List<MayiktUserEntity> data) {
        this.data = data;
    }

    @Override
    public String toString() {
        return "Result{" +
                "code=" + code +
                ", msg='" + msg + '\'' +
                ", data=" + data +
                '}';
    }
}

    axios({
        method: "post",
        url: "${pageContext.request.contextPath}/user/addUser",
        data: JSON.stringify(userList),
        headers: {
            'Content-Type': 'application/json;charset=UTF-8'
        }
    }).then(resp => {

    })

到了這里，關(guān)于ajax & axios & json的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！