# Axious發送json格式數據與服務器端響應
###### tags: `Java Web-vue`

### - 什么是JSON
#### JSON是一种数据格式
#### XML也是一种数据格式
XML格式表示两个学员信息的代码如下：

      <students>
        <student sid="s001">
            <sname>jim</sname>
            <age>18</age>
        </student>
        <student sid="s002">
            <sname>tom</sname>
            <age>19</age>
        </student>
      </students>

JSON格式表示两个学员信息的代码如下：

[{sid:"s001",age:18},{sid:"s002",age:19}]

- JSON表达数据更简洁，更能够节约网络带宽
- 客户端发送JSON格式的数据给服务器端

#### axious寫法
##### 1)客戶端的params需要修改成data

var vue = new Vue({
                "el":"#div0",
                data:{
                    uname:"lina",
                    pwd:"ok"
                },
                methods:{
                    axios02:function(){
                        axios({
                            method:"POST",
                            url:"axios02.do",
                            data:{
                                uname:vue.uname,
                                pwd:vue.pwd
                            }
                        })
                            .then(function (value) {
                                console.log(value);
                            })
                            .catch(function (reason) {
                                console.log(reason);
                            });
                    }
                }
            });

#### java內部寫法
##### 2)服務器獲取參數值不再是request.getParameter()...
##### 而是

StringBuffer stringBuffer = new StringBuffer("");
       BufferedReader bufferedReader = request.getReader();
       String str = null ;
       while((str=bufferedReader.readLine())!=null){
           stringBuffer.append(str);
       }
       str = stringBuffer.toString() ;

@WebServlet("/axios02.do")
public class Axios02Servlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
         // 2.创建StringBuilder对象来累加存储从请求体中读取到的每一行
        StringBuffer stringBuffer = new StringBuffer("");
        // 1.由于请求体数据有可能很大，所以Servlet标准在设计API的时候要求我们通过输入流来读取
        BufferedReader bufferedReader = request.getReader();
        // 3.声明临时变量
        String str = null ;
        // 4.循环读取
        while((str=bufferedReader.readLine())!=null){
            stringBuffer.append(str);
        }
         // 5.关闭流
         bufferedReader.close();
        // 6.累加的结果就是整个请求体
        str = stringBuffer.toString() ;

        //已知 String
        //需要转化成 Java Object
        // 7.创建Gson对象用于解析JSON字符串
        Gson gson = new Gson();
        
        //Gson有两个API
        //1.fromJson(string,T) 将字符串转化成java object
        //2.toJson(java Object) 将java object转化成json字符串，这样才能响应给客户端
        
        // 8.将JSON字符串还原为Java对象
        User user = gson.fromJson(str, User.class);

        System.out.println(user);
    }
}

##### 3) 我们会发现 str的内容如下：
{"uname":"lina","pwd":"ok"}
**************
### 演示Axios发送异步请求给服务器端，服务器响应json格式的数据给客户端

#### java代碼
服务器端给客户端响应JSON格式的字符串，然后客户端需要将字符串转化成js Object

@WebServlet("/axios03.do")
public class Axios03Servlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        StringBuffer stringBuffer = new StringBuffer("");
        BufferedReader bufferedReader = request.getReader();
        String str = null ;
        while((str=bufferedReader.readLine())!=null){
            stringBuffer.append(str);
        }
        str = stringBuffer.toString() ;

        //已知 String
        //需要转化成 Java Object

        Gson gson = new Gson();
        //Gson有两个API
        //1.fromJson(string,T) 将字符串转化成java object
        //2.toJson(java Object) 将java object转化成json字符串，这样才能响应给客户端

        User user = gson.fromJson(str, User.class);
        user.setUname("鸠摩智");
        user.setPwd("123456");

        //假设user是从数据库查询出来的，现在需要将其转化成json格式的字符串，然后响应给客户端
        String userJsonStr = gson.toJson(user);
        response.setCharacterEncoding("UTF-8");
        //MIME-TYPE
        response.setContentType("application/json;charset=utf-8");
        response.getWriter().write(userJsonStr);
    }
}

#### html

var vue = new Vue({
                "el":"#div0",
                data:{
                    uname:"lina",
                    pwd:"ok"
                },
                methods:{
                    axios03:function(){
                        axios({
                            method:"POST",
                            url:"axios03.do",
                            data:{
                                uname:vue.uname,
                                pwd:vue.pwd
                            }
                        })
                            .then(function (value) {
                                var data = value.data;
                                // data对应的数据：
                                // {uname:"鸠摩智",pwd:"ok"}
                                vue.uname=data.uname;
                                vue.pwd=data.pwd;

                                //此处value中的data返回的是 js object，因此可以直接点出属性
                                //如果我们获取的是一个字符串：  "{uname:\"鸠摩智\",pwd:\"ok\"}"

                                //js语言中 也有字符串和js对象之间互转的API
                                //string JSON.stringify(object)     object->string
                                //object JSON.parse(string)         string->object
                            })
                            .catch(function (reason) {
                                console.log(reason);
                            });
                    }
                }
            });