详解vue与后端数据交互(ajax)：vue-resource

Vue.js 是一款流行的前端JavaScript框架，它允许开发者构建交互式的用户界面。在开发过程中，与后端进行数据交互是必不可少的环节。Vue 提供了多种方法来实现这一目标，其中 `vue-resource` 是一个常用的库，它使得Vue应用能够通过Ajax技术与服务器进行通信。 1. **获取普通文本数据** 在Vue中使用 `vue-resource` 获取文本数据非常直观。需要在HTML文件中引入Vue.js和vue-resource库。然后，创建一个新的Vue实例，并在`methods`对象中定义一个函数，例如`get`。在这个函数里，使用`this.$http.get()`方法发送GET请求到指定URL，如`a.txt`。`then()`方法用于处理响应，成功时将返回的数据展示出来，失败时执行错误处理。 ```html <script> var vm = new Vue({ el: '#box', methods: { get: function() { this.$http.get('a.txt') .then(function(res) { alert(res.body); }, function() { console.log('请求失败处理'); }); } } }); </script> ``` 2. **GET请求发送数据给后端** 除了获取数据，还可以通过GET请求向后端发送数据。在`this.$http.get()`方法的第二个参数中传递一个对象，该对象的属性值将会作为查询参数附加到URL上。例如，向`get.php`发送`a`和`b`两个参数： ```javascript this.$http.get('get.php', { a: 1, b: 2 }) .then(function(res) { alert(res.body); }, function(res) { console.log(res.status); }); ``` 3. **POST请求** 对于POST请求，可以使用`this.$http.post()`方法。通常，POST请求需要在第二个参数中提供要发送的数据，并且为了使某些服务器能正确解析，可能需要第三个参数设置为`{emulateJSON: true}`。这模拟了传统的表单提交行为。 ```javascript this.$http.post('post.php', { a: 1, b: 2 }, { emulateJSON: true }) .then(function(res) { alert(res.body); }, function(res) { console.log(res.status); }); ``` 4. **JSONP请求** JSONP（JSON with Padding）是一种跨域数据交互协议，Vue-resource也支持JSONP请求。JSONP通常用于绕过浏览器的同源策略限制。以360搜索的JSONP接口为例，需要在URL中指定回调函数名，并在第二个参数中定义`jsonp`字段。 ```javascript this.$http.jsonp('https://sug.so.360.cn/suggest', { word: 'a' }, { jsonp: 'callback' }) .then(function(res) { console.log(res.data); }, function(res) { console.log(res.status); }); ``` 总结，Vue-resource提供了丰富的API，方便Vue应用与后端进行数据交互，包括GET、POST和JSONP请求。这些功能使得开发者无需离开Vue的生态系统就能轻松地处理与服务器的数据交换，提高了开发效率。在实际项目中，还需要根据具体需求和后端接口设计灵活运用。同时，随着Vue生态的发展，现在更多人倾向于使用 axios 库替代 vue-resource，因为 axios 更现代，性能更好，社区支持更广泛。