从零开始学 Web 之 Vue.js（四）Vue的Ajax请求和跨域

最新推荐文章于 2023-05-06 17:04:38 发布

前端队长

最新推荐文章于 2023-05-06 17:04:38 发布

阅读量602

点赞数

分类专栏：从零开始学 Web 开发文章标签： vue

本文链接：https://blog.csdn.net/lvonve/article/details/82726738

版权

大家好，这里是「从零开始学 Web 系列教程」，并在下列地址同步更新…

github：https://github.com/Daotin/Web

微信公众号：Web前端之巅

博客园：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

一、Vue发送Ajax请求

之前我们发送Ajax请求的方式，一是原生的方式发送，二是通过jQuery来发送Ajax请求。

但是我们知道，在Vue里面是不推荐使用jQuery的，那么如何使用Vue来发送Ajax请求呢？

在Vue中可以使用第三方插件vue-resource 来实现Ajax请求的发送。

1、vue-resource 安装

1、通过npm的方式在线安装：npm install vue-resource

2、在 github 中下载 vue-resource 的文件（在 dist 文件夹下有个 vue-resource.js 文件。）

3、使用 CDN。<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>

2、vue-resource 使用

参考链接：https://github.com/pagekit/vue-resource/blob/develop/docs/http.md

步骤：

1、在Vue.js之后引入vue-resource.js文件（因为vue-resource.js文件是依赖于Vue的）

2、全局使用：

then后面第一个参数是请求成功的回调函数；第二个参数是请求失败的回调函数。

获取到的结果在回调函数的参数中。

Vue.http.get('/someUrl', [config]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);
Vue.http.jsonp('/someUrl', [config]).then(successCallback, errorCallback);

3、局部使用：在methods的事件中，使用 this.$http.get/post/jsonp(); 的形式发起请求。

this.$http.get('/someUrl', [config]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);
this.$http.jsonp('/someUrl', [config]).then(successCallback, errorCallback);

示例：通过三个按钮点击分别获取get，post，jsonp请求。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <script src="./lib/vue-resource-1.3.4.js"></script>
</head>

<body>
    <div id="box">
        <input type="button" value="get请求" @click="getClick">
        <input type="button" value="post请求" @click="postClick">
        <input type="button" value="jsonp请求" @click="jsonpClick">
    </div>

    <script>
        var vm = new Vue({
    
            el: " #box ",
            data: {
    },
            methods: {
    
                getClick() {
    
                    // 参数1：测试用的地址：http://vue.studyit.io/api/getlunbo
                    // 参数2：[config] 可选
                    this.$http.get("http://vue.studyit.io/api/getlunbo").then(result => {
    
                        console.log("ok");
                        console.log(result

最低0.47元/天解锁文章

前端队长

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从零开始学 Web 之 Vue.js（四）Vue的Ajax请求和跨域

大家好，这里是「从零开始学 Web 系列教程」，并在下列地址同步更新…… github：https://github.com/Daotin/Web 微信公众号：Web前端之巅博客园：http://www.cnblogs.com/lvonve/ CSDN：https://blog.csdn.net/lvonve/ 在这里我会从 Web 前端零基...
复制链接

扫一扫