【03】vue.js — http请求交互

来源：互联网发布：淘宝会追缴极速退款么编辑：程序博客网时间：2024/06/03 18:15

请求静态资源

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript" src="js/vue.js" ></script>        <script type="text/javascript" src="js/vue-resource.js" ></script>        <script>            window.onload = function(){                new Vue({                    el: '#box',                    data: {                    },                    methods: {                        get: function(){                            this.$http.get('test.txt').then(function(successRes){                                console.info(successRes.data);                            },function(errorRes){                            })                        }                    }                });            }        </script>    </head>    <body>        <div id="box">            <input type="button" value="按钮" @click="get()" />        </div>    </body></html>

text.txt文件中的内容是：这是测试文件

vue请求静态资源

带参数请求后台

GET请求

YouXinServlet.java文件内容

@WebServlet("/youxin")public class YouXinServlet extends HttpServlet {    private static final long serialVersionUID = -8840959690122919168L;    @Override    protected void doGet(HttpServletRequest req, HttpServletResponse resp)            throws ServletException, IOException {        System.out.println("doGet请求");    }    @Override    protected void doPost(HttpServletRequest req, HttpServletResponse resp)            throws ServletException, IOException {        System.out.println("doPost请求");    }}

前端静态页面html

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript" src="js/vue.js" ></script>        <script type="text/javascript" src="js/vue-resource.js" ></script>        <script>            window.onload = function(){                new Vue({                    el: '#box',                    methods: {                        get: function(){                            this.$http.get('youxin',{                                a: 1,                                b: 2                            }).then(function(successRes){                                console.info(successRes);                            },function(errorRes){                            });                        }                    }                });            }        </script>    </head>    <body>        <div id="box">            <input type="button" value="按钮" @click="get()" />        </div>    </body></html>

vue.js的GET请求

POST请求

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript" src="js/vue.js" ></script>        <script type="text/javascript" src="js/vue-resource.js" ></script>        <script>            window.onload = function(){                new Vue({                    el: '#box',                    methods: {                        get: function(){                            this.$http.post('post.php',{                                a:1,                                b:20                            },{                                emulateJSON:true                            }).then(function(res){                                alert(res.data);                            },function(res){                                alert(res.status);                            });                        }                    }                });            }        </script>    </head>    <body>        <div id="box">            <input type="button" value="按钮" @click="get()" />        </div>    </body></html>

跨域请求 — JSONP(360)

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript" src="js/vue.js" ></script>        <script type="text/javascript" src="js/vue-resource.js" ></script>        <script>            window.onload = function(){                new Vue({                    el: '#box',                    methods: {                        get: function(){                            this.$http.jsonp('https://sug.so.360.cn/suggest',{                                word:'a'                            },{                                emulateJSON: true                            }).then(function(successRes){                                console.info(successRes.data);                            },function(errorRes){                            })                        }                    }                });            }        </script>    </head>    <body>        <div id="box">            <input type="button" value="按钮" @click="get()" />        </div>    </body></html>

vue.js中JSONP请求360搜索数据

跨域请求 — JSONP(百度)

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript" src="js/vue.js" ></script>        <script type="text/javascript" src="js/vue-resource.js" ></script>        <script>            window.onload = function(){                new Vue({                    el: '#box',                    methods: {                        get: function(){                            this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{                                wd: 'a'                            },{                                //默认是使用callback，百度是cb                                jsonp: 'cb'                            }).then(function(successRes){                                console.info(successRes.data);                            },function(errorRes){                            })                        }                    }                });            }        </script>    </head>    <body>        <div id="box">            <input type="button" value="按钮" @click="get()" />        </div>    </body></html>

vue.js请求之JSONP(百度)

阅读全文

0 0