技术标签： Vue中如何实现ajax请求
vue中是推荐使用axios来发送请求的。而且在vue2.0之后也是使用axios来实现发送ajax请求的。
1. 安装
axios有好几种引用的方式，其中主要包括如下：
使用 cdn:
使用npm
$ npm install axios
使用 bower:
$ bower install axios
使用
1.get请求
mounted: function() {
axios
.get('http://www.mycart.com:7772/allItems')
.then(response => (
this.items = response.data))
.catch(function (error) { // 请求失败处理
console.log(error);
});
}
带有参数的形式
// 直接在 URL 上添加参数 ID=12345
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 也可以通过 params 设置参数：
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
2. post请求
let formData = new FormData();
//下面是表单绑定的data 数据
formData.append('skuId', item.skuId);
formData.append('quantity',1);
axios
.post("http://www.mycart.com:7771/cart",formData)
.then(resp=>{
alert("商品添加购物车成功！");
})
.catch(function (error) { // 请求失败处理
alert("商品添加购物车失败");
});
也可以这样传递参数
axios.post('/user', {
firstName: 'Fred', // 参数 firstName
lastName: 'Flintstone' // 参数 lastName
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
跨域请求
axios 默认是不能进行跨域请求的，而且也没法携带cookie，在vue中需要进行如下配置：
axios.defaults.withCredentials = true;
axios.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8';
axios.defaults.crossDomain = true;
然后后端也要进行跨域的设置，比如使用@Crossorigin注解，但是需要注意的是允许访问的域名不能使用通配符*，否则会失效。下面给出后端配置的代码样例：
@CrossOrigin(origins= {"http://www.mycart.com"}, allowCredentials = "true")
public class ItemController {
......
}
文章浏览阅读5.2k次，点赞4次，收藏35次。验证环境window 10系统vivado 2017.4KC705开发板bar空间相关知识具体可以学习下面的文章bar空间说明bar空间测试以下实验，是在PIO example 验证基础上做的。xilinx官方给出的PIOexample工程，默认仅使能了BAR0空间，空间大小为2Kbyte ，读写位宽32bit（未使能64bit）其实这里..._fpga读写pcie bar空间
文章浏览阅读10w+次，点赞1.1k次，收藏8.4k次。1、gets函数2、puts函数3、strcat函数4、s't'r'c'p'y_strlwr函数的用法
文章浏览阅读166次。http://blog.csdn.net/mengyao/archive/2007/02/17/1511356.aspx使用SqlBulkCopy类加载其他源数据到SQL表 在数据回发时，维护ASP.NET Tree控件的位置 vagerent的vs2005网站开发技巧 ASP.NET2.0小技巧－－内部控件权限的实现 图片滚动代码。 css——之三...
文章浏览阅读3.3k次。1.注意项：当使用QPushButton.clicked.connect(lambda:self.信号槽方法)。connect方法传参数时，需要加上“lambda:”2.步骤：添加一个按钮 self.button1 = QPushButton('按钮上的文本')。创建水平布局对象QHBoxLayout，并使用setWidget方法，将button1添加进去。layout = QHBoxLayout..._pyqt5界面无边界后添加打开关闭按钮
文章浏览阅读1.3k次。C语言第三章习题带答案练习3-1答案一、选择题1．在C语言库函数中，可以输出double型变量x值的函数是( D )。A．getchar B．scanf C．putchar D．printf2．执行语句：printf("The program\'s name is c:\\tools\book.txt");后输出是( D )。A．The program's name is c:tool..._执行语句 printf(“ the program\’s name is c:\tools book.txt”);后的输出是
文章浏览阅读8.9k次。1.查找RabbitMQ的安装路径[root@bogon /]# whereis rabbitmqrabbitmq: /etc/rabbitmq /usr/local/rabbitmq[root@bogon /]#2.进入安装路径 /usr/local/rabbitmq[root@bogon sbin]# cd /usr/local/rabbitmq/[root@bogon rabbitmq]# ..._查看rabbitmq安装目录
文章浏览阅读432次。近年来，许多互联网企业已经纷纷涉足智慧城市的研发和推广部门，绝大部分政府规划也包含了未来智慧城市发展明细，有的也宣布已建成了“城市大脑”，但很多人对智慧城市是什么只停留在门外汉阶段，以为城市加大数据就等于智慧城市。宋梁称，凭经验看，新一代网络建设是五年至十年，五年是一个时间节点，会有一些大的变化，像当年智能手机改变你的生活一样，十年之后可能是另外一个东西，改变所有人的生活，这是会发生的事情。数字城市的重点在城市信息的数字化，智慧城市的重点是信息的分析、知识的生成、事件的预测与决策。_城市大屏使用指南
文章浏览阅读2.3w次，点赞16次，收藏73次。摘要：STM32F407VG工程进入软件仿真时，出现*** error 65: access violation at 0x0000000C : no 'read' permission错误。当点击RUN按钮时会重复提示*** error 65: access violation at 0x00000000 : no 'execute/read' permission的错误。解决步骤： 1. Op_*** error 65: access violation at 0x00000000 : no 'execute/read' permission
文章浏览阅读73次。导读 Chef是一个IT基础设施自动化软件，它可以管理你组织中所有的服务器和网络设备。当我们想与Chef服务器、任何物理节点（服务器、网络设备等）的基础设施进行交互时，我们需要一个Chef工作站。本教程解释如何安装和配置Linux服务器上Chef工作站。 ..._linux 安装chef
文章浏览阅读9.4k次。软件安装管家资源整理(2022年7月15更新)_软件安装管家
文章浏览阅读2w次，点赞7次，收藏42次。Qt: QLineEdit圆角边框，选中时变色，显示图标_qlineedit在选中的时候
文章浏览阅读186次。need dare used to had better would better 情态动词 的否定 直接 加not实意动词就会有时态和人称的变化You needn't come so earlyYou don't need t..._情态动词与半情态动词的区别是什么?