Axios

Axios是Ajax的一个框架，简化Ajax操作

一、基本操作

Axios执行Ajax的操作：

添加axios的js文件

<script language="JavaScript" src="script/axios.min.js"></script>

2.1 客户端向服务端异步发送普通参数值

     格式：

axios().then().catch()

-示例：

axios()({ 
    methods:"POST"
    url:"...."                //发送数据信息至....(后端代码“艺名”)
    params:({
        key1:value,
        key2:value
            .
            .
            .
    })
 })

.then(function(value){ })    //axios发送成功后给予的回应

.catch(function(reason){ })  //axios发送失败后的回应，reason.response.data可以获取到相应内容
                                                    reason.message / reason.stack 可以查看错误的信息

2.2 客户端向服务器发送JSON格式的数据

JSON：是一种数据格式，如XML
XML表示两组数据格式：（格式较为清晰）

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

JSON格式：（JSON表达更为简洁，更能够节约网络带宽）

[{sid:"s001",age:18},{sid:"s001",age:16}]

完整代码：

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        window.onload=function(){
            var vue = new Vue({
                "el":"#div0",
                data:{
                    msg:1
                },
                methods:{
                    changeMsg:function(){
                        this.msg = this.msg + 1 ;
                    }

                },
                /*vue对象创建之前*/
                beforeCreate:function(){
                    console.log("beforeCreate:vue对象创建之前---------------");
                    console.log("msg:"+this.msg);
                },
                /*vue对象创建之后*/
                created:function(){
                    console.log("created:vue对象创建之后---------------");
                    console.log("msg:"+this.msg);
                },
                /*数据装载之前*/
                beforeMount:function(){
                    console.log("beforeMount:数据装载之前---------------");
                    console.log("span:"+document.getElementById("span").innerText);
                },
                /*数据装载之后*/
                mounted:function(){
                    console.log("mounted:数据装载之后---------------");
                    console.log("span:"+document.getElementById("span").innerText);
                },
                beforeUpdate:function(){
                    console.log("beforeUpdate:数据更新之前---------------");
                    console.log("msg:"+this.msg);
                    console.log("span:"+document.getElementById("span").innerText);
                },
                updated:function(){
                    console.log("Updated:数据更新之后---------------");
                    console.log("msg:"+this.msg);
                    console.log("span:"+document.getElementById("span").innerText);
                }
            });
        }
    </script>
</head>
<body>
<div id="div0">
    <span id="span">{{msg}}</span><br/>
    <input type="button" value="改变msg的值" @click="changeMsg"/>
</div>
</body>
</html>

后端代码

package com.xx.axios;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/axios01.do")
public class Axios01Servlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        String uname = request.getParameter("uname");
        String pwd = request.getParameter("pwd");
        System.out.println("uname = " + uname + "\n" + "pwd = " + pwd);

        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charast=utf-8");
        PrintWriter out = response.getWriter();
        out.println(uname + "_" + pwd);   //返回至客户端（then中）

        throw new NullPointerException("故意抛出空指针异常！");

    }
}

2.2 客户端向服务端异步发送JSON格式数据

    1）客户端中params需要修改为 data；

    2）服务器获取参数值不再是 request.getParameter（若使用此方法，则无法接收到数据）

            而是：

        //stringbuffer是可变字符串，本质是一个可变的字符数组
        StringBuffer stringBuffer = new StringBuffer("");
        //StringBuilder stringBuilder = new StringBuilder();

        //由于请求数据有可能很大，所以使用Sevlet标准在设计API时，通过输入流来获取
        BufferedReader reader = request.getReader();
        //声明临时变量
        String str = null;
        //循环读取str中读取的数据
        while ((str = reader.readLine()) != null){
            stringBuffer.append(str);
        }
        //累加的结果即为整个请求体
        str = stringBuffer.toString();

            则str的内容如下：

     3）将（JSON格式的）String转化为User Object ( 需要使用第三方GSON )

2.3 服务器端给客户端响应JSON格式字符串，然后客户端需要将字符串转化为js Object

MIME类型参考：

<mime-mapping>
    <extension>mp4</extension>
    <mime-type>video/mp4</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>doc</extension>
    <mime-type>application/msword</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>json</extension>
    <mime-type>application/json</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>html</extension>
    <mime-type>text/html</mime-type>
</mime-mapping>

标签： javascript ajax 前端

本文转载自: https://blog.csdn.net/qq_50233116/article/details/126999022
版权归原作者 星星下雪 所有，如有侵权，请联系我们删除。

一、基本操作

发表评论

“Axios”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航