微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Vue -ajax

vue发送ajax请求需要使用第三方包如vue-resource、xaios

vue-resource是和vue高度集成的第三方包,依赖vue,所以导包时要先导vue

vm实例创建后会挂载到window上,而vue-resource导包后会在vm上挂载$http属性,通过this.$http就能进行ajax请求

分享图片

 

发送get请求

 

 

<head>
    <script src="lib/vue.js"></script>
    <script src="lib/vue-resource.min.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="get请求" @click="getInfo">
</div>
<script>
    var vm = new Vue({ el: #app,methods: { getInfo() { //a.txt为当前目录下的一个纯文本
                this.$http.get(./a.txt).then(function (result) { console.log(result) }) } } }) </script>
</body>    

由于是使用Promise来封装,所以获取使用then来获取结果,result是一个对象,响应数据封装在此对象的body中

分享图片

 

发送post请求

//参数一为URL地址,参数二为要发送给服务器的数据对象,参数三为配置对象 this.$http.post(‘url‘,{},{}).then(function (result) { console.log(result) })
手动发起的post请求认没有表单格式,所以有的服务器处理不了
此时可通过第三个参数设置提交的内容类型为普通表单数据类型格式{ emulateJSON:true }
相关内容查看官方说明文档

 发送jsonp请求

this.$http.post(‘URL地址‘).then(function (result) { console.log(result) })

 

 发送ajax应该趁早

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐