Vue -ajax

发布时间：2020-12-16 03:02:12 所属栏目：百科来源：网络整理

导读：vue发送ajax请求需要使用第三方包如vue-resource、xaios vue-resource是和vue高度集成的第三方包，依赖vue，所以导包时要先导vue vm实例创建后会挂载到window上，而vue-resource导包后会在vm上挂载$http属性，通过this.$http就能进行ajax请求 ? 发送get请求

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应该趁早

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!