Vue resource三种请求格式和万能测试地址
更新时间：2018年09月26日 11:05:58 作者：RainbowSkr
这篇文章主要介绍了Vue-resource三种请求格式和万能测试地址,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
注意：
1.前端服务器测试地址的万能地址，太好用了http://jsonplaceholder.typicode.com/users，基本能响应各种请求。点击进入官网
2.这里测试只写了成功的回调函数，同时还要失败时的回调函数。
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.js"></script>
<script src="../lib/vue-resource.js"></script>
<!--vue-resource是基于vue.js的，要后导入-->
</head>
<body>
<div id="app">
<input type="button" value="get方式" v-on:click="getInfo">
<input type="button" value="post方式" v-on:click="postInfo">
<input type="button" value="jsonp方式" v-on:click="jsonpInfo">
</div>
<script>
var vm = new Vue({
el:'#app',
data:{},
methods:{
getInfo(){
this.$http.get('http://jsonplaceholder.typicode.com/users').then(result=> {
console.log(result.body);
})
},
//get请求，通过function执行的成功的回调函数，得到body和data等数据
postInfo(){
this.$http.post('http://jsonplaceholder.typicode.com/users',{},{emulateJSON:true}).then(result=>{
console.log(result.body);
})
},
//post请求，中间花括号空的部分为提交给服务器的数据这里默认，emulateJSON:true,将手动提交表单格式设置为application/x-www-form-urlencoded格式
jsonpInfo(){
this.$http.jsonp('http://jsonplaceholder.typicode.com/users').then(result=>{
console.log(result.body)
})
}
}
});
</script>
</body>
效果：依次点击按钮得到的结果
总结
以上所述是小编给大家介绍的Vue resource三种请求格式和万能测试地址，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
vue+jquery+lodash实现滑动时顶部悬浮固定效果
这篇文章主要为大家详细介绍了vue+jquery+lodash实现滑动时顶部悬浮固定效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-04-04
这篇文章主要介绍了uniapp中uni-load-more的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
这篇文章主要为大家详细介绍了Vue如何结合Echarts实现绘制多设备状态甘特图,文中的示例代码讲解详细,有需要的小伙伴可以跟随小编一起学习一下2024-03-03
这篇文章主要介绍了vue中使用swiper5方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要给大家介绍了关于在vue中如何使用node.js的相关资料,vue和nodejs经常让新手们感到困惑,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-07-07
这篇文章主要给大家介绍了关于Vue组件库开发的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-07-07
这篇文章主要为大家详细介绍了vue-cli+webpack创建记事本项目，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要介绍了Vue中的高德轨迹回放问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了前端框架vue，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
element的表单校验证件号规则及输入“无”的情况校验通过(示例代码)
这篇文章主要介绍了element的表单校验证件号规则及输入“无”的情况校验通过,使用方法对校验数据进行过滤判断,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2023-11-11
最新评论