1.之前学习中，如何发起数据请求？

2.常见的数据请求类型？get post jsonp

3.常见的URL请求资源地址

　　get请求地址：  http://vue.studyit.io/api/getlunbo

　　post请求地址：http://Vuestudyit.io/api/post

　　jsonp请求地址：http://Vuestudyit.io/api/jsonp

4.JSONP的实现原理

　　由于浏览器的安全性限制，不允许AJAX访问  协议不同，域名不同，端口不同 数据接口不同，浏览器认为这种访问不安全

　　可以通过动态创建script标签的形式，把script标签的src属性指向数据接口的地址，因为script标签不存在跨域限制，这个数据获取方式，称作为JSONP  （

　　注意：根据JSONP的实现原理，知晓JSONP只支持GET请求）

　　具体的实现过程：

  • 　　　　先在客户端定义一个回调方法，预定义对数据的操作
  • 　　　　再把这个回调方法的名称，通过URL传参的形式 提交到服务器的数据接口
  • 　　　　服务器数据接口组织好要发送给客户端的数据，在拿着客户端传递过来的回调函数方法名称，拼接出一个调用这个函数的字符串，发送给客户端去解析执行
  • 　　　　客户端拿到服务器返回字符串之后，当作script脚本去解析执行，这样就能够拿到JSONP的数据了。

　除了使用v-resouce之外，还可以使用axios的第三方包实现数据的请求 主流现在是axios

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="./lib/vue-2.4.0.js"></script>

    <!-- 引入第三方的axios cdn包 -->

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>   

</head>

<body>

    <div class="app">

        <input id="aa" type="button" value="点击我" @click="getinfo">

        <input type="button" value="VueGET" @click="getinfo">

    </div>

<script>

// 使用js GET请求

window.onload=function(){

            //1.获取a节点，并为其添加onclick点击函数

            document.getElementById("aa").onclick=function(){

                //创建一个XMLHttpRequest对象

                var request=new XMLHttpRequest();

                //5.调用XMLHttpRequest对象的open方法 建立与服务器之间的联系

                request.open("GET",'http://www.phonegap100.com/appapi.php?a=getportalList&catid=20&page=1');

                //6.调用XMLHttpRequest对象的send方法

                request.send(null);

                //7.为XMLHttpRequest 对象添加onreadystatechange响应函数

                request.onreadystatechange=function(){

                    //8.判断响应是否完成：XMLHttpRequest 对象的readystate属性为4的时候

                    if(request.readyState==4){

                        //9.在判断响应是否可用，XMLHttpRequest 对象status属性值为200

                        if(request.status==200||request.status==304){

                            //10.输出结果  responseText

                            console.log(request);

                        }

                    }

                }

                //2.取消点击事件的默认行为

                return false;

            }

}

        // 使用Vue axios get请求

    var vm=new Vue({

        el:'.app',

        data:{},

        methods: {

            getinfo(){   //发起get请求

            var api='http://www.phonegap100.com/appapi.php?a=getportalList&catid=20&page=1';

               axios.get(api).then(function(result){

                    console.log(result);          //请求成功

               });

            }

        },

    });

</script>

</body>

</html>

Vue-resoure 实现get post jsonp请求的更多相关文章

  1. vue.js的ajax和jsonp请求

    首先要声明使用ajax 在 router下边的 Index.js中 import VueResource from 'vue-resource'; Vue.use(VueResource); ajax ...

  2. [Vue] : vue-resource 实现 get, post, jsonp请求

    vue-resource 实现 get, post, jsonp请求 常见的数据请求类型:get,post,jsonp 除了vue-resource之外,还可以使用axios的第三方包实现实现数据的请 ...

  3. Vue学习笔记【16】——vue-resource 实现 get, post, jsonp请求

    除了 vue-resource 之外,还可以使用 axios 的第三方包实现实现数据的请求 之前的学习中,如何发起数据请求?原生.jQuery,需要操作DOM 常见的数据请求类型? get post ...

  4. 黑马vue---33、vue-resource 实现 get, post, jsonp请求

    黑马vue---33.vue-resource 实现 get, post, jsonp请求 一.总结 一句话总结: vue-resource使用非常非常非常简单:this.$http.get('htt ...

  5. vue--vue-resource实现 get, post, jsonp请求

    vue-resource 实现 get, post, jsonp请求 除了 vue-resource 之外,还可以使用 axios 的第三方包实现实现数据的请求 之前的学习中,如何发起数据请求? 常见 ...

  6. Vue系列（二）：发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡

    上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...

  7. vue 使用 jsonp 请求数据

    vue 使用 jsonp 请求数据 vue请求数据的时候,会遇到跨域问题,服务器为了保证信息的安全,对跨域请求进行拦截,因此,为了解决vue跨域请求问题,需要使用jsonp. 安装jsonp npm ...

  8. vue-resource: jsonp请求百度搜索的接口

    1. yarn add vue-resource 2. main.js引入vue-resource import Vue from 'vue' import MintUI from 'mint-ui' ...

  9. Vue（八）发送跨域请求

    使用vue-resource发送跨域请求 axios不支持跨域 1 安装vue-resource并引入 cnpm install vue-resource -S 2 基本用法 使用this.$http ...

随机推荐

  1. Spring cloud微服务安全实战-4-2微服务安全的新挑战

    微服务的环境下,我的业务逻辑不再是在一个单一的进程里,而是分散了很多的进程里.订单.物流.库存.价格.每一个tomcat都是一个进程. 每一个进程,每一个tomcat都有自己的入口点.那么就导致我防范 ...

  2. "AttributeError: /lib64/libcrypto.so.1.1: undefined symbol: EVP_CIPHER_CTX_cleanup"

    以前在openssl,有 EVP_CIPHER_CTX_cleanup函数. 1.1.0版本中 替换成为EVP_CIPHER_CTX_reset 解决办法: 找到报错的文件vim /usr/local ...

  3. CM记录-CDH部署手册

    1.安装环境和软件准备 CentOS release 7.4 JDK1.8.0_121 mysql-connector-java-5.1.40-bin.jar CDH-5.10.2-1.cdh ...

  4. LinkedHashMap和hashMap和TreeMap的区别

    推荐博客:https://www.jianshu.com/p/8f4f58b4b8ab 区别: LinkedHashMap是继承于HashMap,是基于HashMap和双向链表来实现的. HashMa ...

  5. lnmp 多版本php 同时运行

    首先需要装好两个版本以上的PHP(例如:php5.6和php7两个版本).这里假设你已安装完成. .配置并启动php默认版本: (设置 nginx 的 vhost 域名配置文件监听端口就好) ).打开 ...

  6. 常见浏览器CSS hack方法总结

    ie6和ie7 #tip {*background:black; /*IE7 背景变黑色*/_background:orange; /*IE6 背景变橘色*/} IE8和IE9 :root .test ...

  7. SpringBoot学习笔记：Redis缓存

    SpringBoot学习笔记:Redis缓存 关于Redis Redis是一个使用ANSI C语言编写的免费开源.支持网络.可基于内存亦可以持久化的日志型.键值数据库.其支持多种存储类型,包括Stri ...

  8. 推荐linux运维必备的几本书

    首先,<鸟哥的linux私房菜> 鸟哥 其次,<linux就该这么学> 刘瑞版 然后,<CentOS linux系统运维> 张祥琳版 最后,<CentOS运维 ...

  9. Deepin安装JavaFX

    1.环境:JDK1.8(目前国内好用的版本里比较流行的是这个版本),deepin 15.11(linux内核是5.2.9,安装了大黄蜂驱动): 2.由于是用的JDK1.8,所以没法用最新的openjf ...

  10. 【转帖】kubernetes 部署ingress

    kubernetes 部署ingress https://www.cnblogs.com/dingbin/p/9754993.html 明天尝试一下 之前的文档里面一直没有提 需要改host文件 我有 ...