欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue2.0学习笔记-13、vue-resouces(get、post一级jsonp跨域请求)

程序员文章站 2022-06-06 23:15:53
...

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请求执行效果:
Vue2.0学习笔记-13、vue-resouces(get、post一级jsonp跨域请求)
post请求执行效果:
Vue2.0学习笔记-13、vue-resouces(get、post一级jsonp跨域请求)
上图中是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框架自己写的接口。多好,学一个新知识的同时又掌握了另一个新知识, 开心