Vue之两种插件处理ajax请求

Vue之两种插件处理ajax请求

一 axios插件处理ajax请求(推荐)

1 方式一处理get和post请求
  1. 语法
get语法一:
  axios({

     method : "get", //请求方式
     url : "请求路径?参数"  //请求路径,如果带参数则 ?参数
	
   }).then(function (result) {});
get语法二:ES6语法
  axios({

     method : "get", //请求方式
     url : "请求路径?参数"  //请求路径,如果带参数则 ?参数
	
   }).then(result => {});
    axios({

     method : "post, //请求方式
     url : "请求路径"  //请求路径,参数方式一
	 params:{"":""....}    //参数方式二
   }).then(function(result){});
post语法二:ES6语法
   axios({

     method : "post, //请求方式
     url : "请求路径"  //请求路径
	 params:{"":""....}    //参数方式
   }).then(result => {});
  1. jsp页面代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>mytitle</title>
    <!--

        导入axios插件来实现ajax请求

    -->
    <script src="vue/vue-2.4.0.js"></script>
    <script src="vue/axios.min.js"></script>
</head>
<body>

    <div id="app">

        <button @click="getStudent">点击取得学生信息</button>

        <br/>
        <br/>

        编号:<span>{{id}}</span><br/>
        姓名:<span>{{name}}</span><br/>
        年龄:<span>{{age}}</span><br/>

    </div>

    <script>

        var vm = new Vue({

            el : "#app",
            data : {

                "id" : "",
                "name" : "",
                "age" : ""

            },
            methods : {

                getStudent(){

                    /*

                        在请求执行成功后,执行回调函数中的内容,回调函数处于其他函数的内部,this不会与任何的对象绑定(以this.data的形式引入数据就引不到了)
                        将指向vue对象的this赋值给外部方法定义的属性,然后在内部方法中使用该属性即可

                    */

                    var _this = this;
                    axios({

                        method : "get", //请求方式
                        url : "myServlet03.do"  //请求路径

                    }).then(function (result) {

                        /!*

                            注意:
                                之前使用vue-resource插件 对于值的处理 返回值.body的操作
                                这次使用axios插件,同样需要对值进行处理  返回值.data的形式

                         *!/
                        //alert(result.data.id);

                        data = result.data;

                        _this.id = data.id;
                        _this.name = data.name;
                        _this.age = data.age;

                    })

                    axios({

                        method : "get", //请求方式
                        url : "myServlet03.do?name=aaa"  //请求路径

                    //使用 箭头表达式=> 在代替原有的function来做回调函数
                    }).then(result=> {

                        /!*

                        注意:
                                之前使用vue-resource插件 对于值的处理 返回值.body的操作
                        这次使用axios插件,同样需要对值进行处理  返回值.data的形式

                        *!/
                        //alert(result.data.id);

                        data = result.data;

                        this.id = data.id;
                        this.name = data.name;
                        this.age = data.age;

                    })

                    //以param属性的形式来传递参数
                    axios({

                        method : "post", //请求方式
                        url : "myServlet03.do",  //请求路径
                        params : {"name":"bbb"}  //传递参数
                        //使用 箭头表达式=> 在代替原有的function来做回调函数
                    }).then(result=> {

                        /*

                        注意:
                                之前使用vue-resource插件 对于值的处理 返回值.body的操作
                        这次使用axios插件,同样需要对值进行处理  返回值.data的形式

                        */
                        //alert(result.data.id);

                        data = result.data;

                    this.id = data.id;
                    this.name = data.name;
                    this.age = data.age;

                })

                }

            }

        })

    </script>
</body>
</html>
2 方式二处理get和post请求
  1. 语法
get请求:
   axios.get(

         "请求路径",  //请求路径
            {
                params : {
                    "name" : "aaabbb"
                }
            }  //请求参数
        ).then(result=>{});
post请求:        
     axios.post(

         "请求路径",  //请求路径
          "参数一":"值"//请求参数
        ).then(result=>{});
  1. jsp页面代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>mytitle</title>
    <!--

        导入axios插件来实现ajax请求

    -->
    <script src="vue/vue-2.4.0.js"></script>
    <script src="vue/axios.min.js"></script>
</head>
<body>

    <div id="app">

        <button @click="getStudent">点击取得学生信息</button>

        <br/>
        <br/>

        编号:<span>{{id}}</span><br/>
        姓名:<span>{{name}}</span><br/>
        年龄:<span>{{age}}</span><br/>

    </div>

    <script>

        var vm = new Vue({

            el : "#app",
            data : {

                "id" : "",
                "name" : "",
                "age" : ""

            },
            methods : {

                getStudent(){

                    axios.get(

                        "myServlet04.do",  //请求路径
                        {

                            params : {

                                "name" : "aaabbb"

                            }

                        }  //请求参数

                    ).then(result=>{

                        var data = result.data;

                        this.id = data.id;
                        this.name = data.name;
                        this.age = data.age;

                    })

                    axios.post(

                        "myServlet04.do",  //请求路径
                       
                        /*

                            该方式发送数据是一个 Request Payload的数据格式,一般的数据格式都是Form Data格式
                            所以我们之前写的以json形式的参数就发送不出去

                            只能通过传统字符串的方式为后台发送参数

                         */
                        "name=aaabbbccc"

                    ).then(result=>{

                        var data = result.data;

                    this.id = data.id;
                    this.name = data.name;
                    this.age = data.age;

                })

                }
            }
        })
    </script>
</body>
</html>

二 vue-resource插件处理ajax请求

1 处理get请求
  1. 语法
this.$http.get("请求路径?参数").then(function(result){});
  1. jsp页面代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>mytitle</title>
    <!--

        导入vue-resource类库之后,就可以使用this.$http.xxx来实现ajax功能了

        注意:对于idea,直接复制粘贴过来的文件有可能报404错误(资源定位不到的)
            这时我们可以先手动创建这个文件,在复制粘贴里面的内容到该文件中就可以了


    -->
    <script src="vue/vue-2.4.0.js"></script>
    <script src="vue/vue-resource-1.3.4.js"></script>
</head>
<body>

    <div id="app">

        <button @click="getStudent">点击取得学生信息</button>

        <br/>
        <br/>

        编号:<span>{{id}}</span><br/>
        姓名:<span>{{name}}</span><br/>
        年龄:<span>{{age}}</span><br/>

    </div>

    <script>

        var vm = new Vue({

            el : "#app",
            data : {

                "id" : "",
                "name" : "",
                "age" : ""

            },
            methods : {

                getStudent(){

                    //发出ajax请求,取得学生信息,在页面中局部刷新学生信息
                    //对于参数的传递,get请求和post请求的参数传递的语法是不同的,这一点有别于其他的前端语言
                    //对于get请求,必须是在路径的后面以url?key1=value1&key2=value2&key3=value3这种传统的形式来传递参数
                    this.$http.get("myServlet01.do?name=zs123").then(function (data) {

                        //通过data.body的形式来拿到服务器返回成功的数据
                        //alert(data.body.id);

                        //为页面填写值
                        /*this.id = data.body.id;
                        this.name = data.body.name;
                        this.age = data.body.age;*/

                        data = data.body;

                        this.id = data.id;
                        this.name = data.name;
                        this.age = data.age;


                    })


                }

            }

        })
 </script>
</body>
</html>
2 处理post请求
  1. 语法
 this.$http.post("请求路径",参数如:{"name":"ls123"},{emulateJSON:true}).then(function (data) {});
 说明:{emulateJSON:true}设置,提交的内容类型就设置为了普通表单的格式传递参数
  1. jsp页面代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>mytitle</title>
    <script src="vue/vue-2.4.0.js"></script>
    <script src="vue/vue-resource-1.3.4.js"></script>
</head>
<body>

    <div id="app">

        <button @click="getStudent">点击取得学生信息</button>

        <br/>
        <br/>

        编号:<span>{{id}}</span><br/>
        姓名:<span>{{name}}</span><br/>
        年龄:<span>{{age}}</span><br/>

    </div>

    <script>

        var vm = new Vue({

            el : "#app",
            data : {

                "id" : "",
                "name" : "",
                "age" : ""

            },
            methods : {

                getStudent(){

                    //发出ajax请求,取得学生信息,在页面中局部刷新学生信息
                    //发出post请求
                    //post请求参数传递的方式,是以请求体的方式来传递的,所以不能将参数挂在url后面
                    /*

                        关于post请求传递参数的问题:

                        手动发起的post请求,默认没有表单格式,所以有些服务器就处理不了
                        我们需要通过post方法的第三个参数,{emulateJSON:true}设置,提交的内容类型就设置为了普通表单的格式传递参数

                     */
                    this.$http.post("myServlet02.do",{"name":"ls123"},{emulateJSON:true}).then(function (data) {

                        //与get请求一样,我们接受到后台响应的信息,需要先使用data.body进行处理,才能够拿到我们需要的值
                        data = data.body;

                        this.id = data.id;
                        this.name = data.name;
                        this.age = data.age;

                    })

                }

            }

        })

    </script>
</body>
</html>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值