Vue2.0学习笔记-13、vue-resouces（get、post以及jsonp跨域请求）

最新推荐文章于 2023-05-25 17:34:20 发布

不收藏找不到我

最新推荐文章于 2023-05-25 17:34:20 发布

阅读量235

点赞数

分类专栏： vue学习笔记文章标签： vue ajax

本文链接：https://blog.csdn.net/weixin_41364246/article/details/110006106

版权

vue学习笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue.js中使用vue-resource库进行get、post请求及jsonp跨域请求。通过示例代码展示了如何设置全局根路径、发起请求以及处理响应。在实际操作中，作者自己搭建了Express接口来配合请求。文章强调了学习新技术的同时掌握相关知识的重要性。

摘要由CSDN通过智能技术生成

1、get和post请求
代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!---引入vue-resouces资源，必须在引入vue以后再引入--->
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  </head>
  <body>
    <div id="app">
      {{msg}}

      <button @click="getJson">get请求</button>
      <button @click="postJson">post请求</button>
    </div>
    <script type="text/javascript">
      Vue.http.options.root = "http://localhost:3000/"; //设置全局根路径
      var vm = new Vue({
        el: "#app",
        data: {
          msg: null,
        },
        methods: {
          getJson: function () {
            this.$http.get("get").then(
              function (response) {
                this.msg = response.body;
              },
              function (error) {
                this.msg = error;
              }
            );
          },

          postJson: function () {
            this.$http.post("post/本田/245", { emulateJSON: true }).then(
              function (response) {
                this.msg = response.body;
              },
              function (error) {
                this.msg = error;
              }
            );
          },
        },
      });
    </script>
  </body>
</html>

get请求执行效果：
在这里插入图片描述
post请求执行效果：

上图中是post请求执行成功后返回的内容
3、jsonp跨域请求
代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  </head>
  <body>
    <div id="app">{{msg}}</div>
    <script type="text/javascript">
      Vue.http.options.root = "http://localhost:3000/"; //设置全局根路径
      var vm = new Vue({
        el: "#app",
        data: {
          msg: null,
        },
        methods: {},
        mounted: function () {
          this.$http
            .jsonp("jsonp", {
              jsonp: "cb",//由于我在服务端将回调函数名称改为了cb，因此这里必须指明回调函数名称（服务端默认的回调函数名称为callback，vue-resouces的jsonp请求默认的回调函数名称也是callback）
            })
            .then(function (response) {
              if (response.status == 200) this.msg = response.body;
            });
        },
      });
    </script>
  </body>
</html>

这就是vue里面的ajax，没啥说的，自己敲两遍就懂了；麻烦的地方是：我照着网上的教程学这个地方，人家发送get、post和jsonp请求都有请求地址(Url)，我也没有，我只能自己写，以前会写php和jsp，但是这两个技术都被淘汰了（主要是忘了，2333）,没办法新学了express框架自己写的接口。多好，学一个新知识的同时又掌握了另一个新知识，开心