一、Vue异步操作


在Vue中发送异步请求,本质上还是AJAX。我们可以使用axios这个插件来简化操作!

- 使用步骤
1.引入axios核心js文件。
2.调用axios对象的方法来发起异步请求。
3.调用axios对象的方法来处理响应的数据。

- axios常用方法

get:发起Get方式请求

post:发起Post方式请求

then:请求成功后的回调函数,通过response获取相应数据

catch:请求失败后的回调函数,通过error获取错误信息

 

  二、Vue异步操作 Axios示例


Axios发送异步get/Post请求示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步操作</title>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    <div id="div">
        {{name}}
        <button @click="send()">发起异步请求</button>
    </div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
            name:"张三"
        },
        methods:{
            send(){
                // GET方式请求
                // axios.get("testServlet?name=" + this.name)
                //     .then(resp => {
                //         alert(resp.data);
                //     })
                //     .catch(error => {
                //         alert(error);
                //     })
 
                // POST方式请求
                axios.post("testServlet","name="+this.name)
                    .then(resp => {
                        alert(resp.data);
                    })
                    .catch(error => {
                        alert(error);
                    })
            }
        }
    });
</script>
</html>

 

posted on 2024-09-01 21:00  努力--坚持  阅读(34)  评论(0编辑  收藏  举报