vue.js的ajax和jsonp请求

首先要声明使用ajax 在 router下边的 Index.js中

import VueResource from 'vue-resource';

Vue.use(VueResource);

ajax 和 jsonp 使用方法：

//在Vue实例类使用
this.$http.get(url, [options]).then(successCallback, errorCallback);  var test = new  Vue({  el:'#v',  data:{  jsonUrl:'xxxx',  jsonpUrl:'xxxxx',  req:{}  resData:[]  },  mthods:{  init:function(id){  this.$http.get(this.jsonUrl,this.req).then(function(res){  console.log(res);  this.$set('resData',res);  },function(res){  console.warn(res);  })  },  cli:function(id){  //jsonp请求  this.$http.jsonp(this.jsonpUrl).then(  function(res){  console.log(res);  this.$set('resData',res);  }  )  }  }
})

//需要注意的是jsonp请求的服务端返回的数据格式有些不一样，下面以PHP为例

[php] view plain copy
$call = $_GET['callback'];
$json = json_encode(['data'=>'tttttt']);
echo $call.'('.$json.')';

vue请求数据方法

1、get 请求并传递参数方法

var param = {page: this.page,pageSize: this.pageSize,sort: 1};this.$http.get('/goods',{params: param}).then((response) => {response = response.body.result.list;this.shopList = response;});

2、原始的拼接参数方法

this.$http.get('/goods?page='+this.page+'&pageSize='+this.pageSize+'&sort=1').then((response) => {console.log(response)response = response.body.result.list;this.shopList = response;console.log(this.shopList)});

3、post的请求

 this.$http.post('in.php',{a:1,b:2},{emulateJSON:true}).then( (res) => {console.log(res.data)} )

转载于:https://www.cnblogs.com/haonanZhang/p/7110350.html

vue.js的ajax和jsonp请求相关推荐

原声ajax发送post请求,原生JS实现ajax 发送post请求
1. [代码]原生JS实现ajax 发送post请求 var oStr = ''; var postData = {}; var oAjax = null; //post提交的数据 postData ...
原生JS实现Ajax和JSONP跨域请求
背景: 对接身份证录入和门锁卡号录入设备中,安装驱动完成后,提供的接口服务是http://localhost:8099/?cmd=readbcardid&charset=gbk,返回的数据格式 ...
原生js实现Ajax，JSONP
Ajax内部的几个执行步骤创建XMLHttpRequest对象(new XMLHttpRequest()) 设置请求头(setRequestHeader) 连接服务器(open()) 设置回调(on ...
js原生ajax跨域请求,封装一个原生js的ajax请求,支持IE9CORS跨域请求
前言关于纯js的ajax请求,我之前有文章写过, https://www.haorooms.com/post/js_ajax_chun , 关于CORS跨域资源共享,我也有文章写过, https:/ ...
vue.js与ajax删除,javascript - VueJs和VueResource，从Ajax请求中删除标头字段 - 堆栈内存溢出...
当实例化Vuejs (2.2.6)和Vue-resource (1.2.1)时 ,我使用以下代码设置标头授权,通过这种方式,我可以将所有请求授权给我的API: Vue.http.headers.com ...
js实现ajax的post请求步骤
post请求步骤与前篇的get请求步骤差别不大,只是增加了 xhr.setRequestHeader("Content-type","application/x-www- ...
ajax绑值,vue.js使用ajax绑定数据之post方法
[HTML] 纯文本查看复制代码发送AJAX请求 window.οnlοad=function(){ new Vue({ el:'#itany', data:{ user:{ name:'alic ...
原生js ajax请求 post,原生js实现ajax 发送post请求
2019独角兽企业重金招聘Python工程师标准>>> var postData = { "name1": "value1", "n ...
Vue.js使用-http请求
Vue.js使用-ajax使用 1.为什么要使用ajax 前面的例子,使用的是本地模拟数据,通过ajax请求服务器数据. 2.使用jquery的ajax库示例 new Vue({el: '#app', ...
axios vue 动态date_Web前端Vue系列之-Vue.js 实战
课程简介: 课程目标:通过本课程的学习,让大家掌握Vue.js的进阶知识并在项目中应用. 适用人群:具有一定vue开发基础的开发人员. 课程概述:Vue (读音 /vjuː/,类似于 view) 是一 ...

vue.js的ajax和jsonp请求

vue.js的ajax和jsonp请求相关推荐

最新文章

热门文章