ホームページ > ウェブフロントエンド > jsチュートリアル > Vueのカプセル化ajaxのコード例を詳しく解説

Vueのカプセル化ajaxのコード例を詳しく解説

不言
リリース: 2018-12-11 09:55:28
転載
2441 人が閲覧しました

この記事の内容は、Ajax をカプセル化する Vue のコード例を詳しく説明したものです。必要な方は参考にしていただければ幸いです。

HTML ファイル:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="app">

        <button @click="getInfo">点击获取信息</button>

        <span>{{ msg }}</span>

    </div>

    <script src="vue.js"></script>

    <script src="vue-ajax.js"></script>

    <script>

        var vm=new Vue({

            el: "#app",

            data: {

                msg: "",

            },

            methods: {

                getInfo: function (){

                    var self=this;

                    this.ajax.get("1.json",{

                        tel: 123456,

                        address: "杭州"

                    },function (data){

                        self.msg=data[1].name

                    },"json");

                }

            }

        })

    </script>

</body>

</html>

ログイン後にコピー

JS ファイル:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

/*

* ajax封装:

* 1. 引入文件

* 2. new Vue().ajax.get(url,data,fn,ojson), 或 new Vue().ajax.post(url,data,fn,ojson)

*     url: 需要获取数据的文件地址 (string)

*     data: 需要发送的信息 (可省略) (obj)

*     fn: 获取信息后的回调函数,接收到的返回值为data (function)

*     ojson: 是否需要转换为json格式 (可省略) (设置为 "json")

*

* 3. new Vue().ajax.get().cancel(): 取消异步请求

* 4. new Vue().ajax.json(str): 可转化json格式字符串

**/

Vue.prototype.ajax={

    //添加url传送信息

    addUrl: function (url,obj){

        //如果省略url,则为post请求,令obj为url,令url为null

        if(arguments.length==1){

            obj=url;

            url=null;

        }

        //url不为空(get请求: 设置url信息)

        if(!!url){

            for(var k in obj){

                url += (url.indexOf("?")==-1 ? "?" "&");

                url+=encodeURIComponent(k)+ "=" +encodeURIComponent(obj[k]);

            }

        }else{

            //post请求(设置data信息)

            url="";

            for(var k in obj){

                url+=encodeURIComponent(k)+ "=" +encodeURIComponent(obj[k]);

                url+="&";

            }

            //删除最后一个&

            var arr=url.split("");

            arr.pop();

            url=arr.join("");

        }

        //返回拼接好的信息

        return url;

    },

    get: function (url,data,fn,ojson){

        this.xhr=new XMLHttpRequest();

        //省略data时,即不发送数据

        if(typeof data =="function"){

            ojson=fn;

            fn=data;

            data={};

        }

        //合并url和data信息

        url=this.addUrl(url,data)

        //是否异步发送

        this.xhr.open("get",url,true);

        this.xhr.send(null);

        //当请求完成之后调用回调函数返回数据

        this.success(fn,ojson);

        //链式编程

        return this;

    },

    post: function (url,data,fn,ojson){

        this.xhr=new XMLHttpRequest();

        //省略data时,即不发送数据

        if(typeof data =="function"){

            ojson=fn;

            fn=data;

            data={};

        }

        //合并data信息

        data=this.addUrl(data);

        //是否异步发送

        this.xhr.open("post",url,true);

        this.xhr.setRequestHeader("Content-Type""application/x-www-form-urlencoded");

        this.xhr.send(data);

 

        //当请求完成之后调用回调函数返回数据

        this.success(fn,ojson);

        //链式编程

        return this;

    },

    //字符串转换json

    json: function (str){

        return (new Function("return " + str))(); 

    },

    success: function (fn,ojson){

        //当请求完成之后调用回调函数返回数据

        var self=this;

        this.xhr.onreadystatechange=function (){

            var odata;

            if(self.xhr.readyState == 4){

                if((self.xhr.status>=200 && self.xhr.status<300) || self.xhr.status == 304){

                    odata=self.xhr.responseText;

                    //若为json则转化json格式

                    if(ojson==="json"){

                        odata=self.json(odata);

                    }

                    fn(odata);

                }else{

                    odata="request was unsuccessful: "+self.xhr.status;

                    fn(odata);

                }

            }

        }

    },

    //取消异步请求

    cancel: function (){

        this.xhr.abort();

        return this;

    }

}

ログイン後にコピー

バックエンド取得またはフロントエンドで構築されたデータ構造:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

[

    {

        "name""张三",

        "age": 18,

        "sex""man"

    },

    {

        "name""李四",

        "age": 20,

        "sex""woman"

    },

    {

        "name""王五",

        "age": 22,

        "sex""man"

    }

]

ログイン後にコピー

以上がVueのカプセル化ajaxのコード例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート