Vue js AJAX 请求与数据响应教程（六）

在现代 Web 开发中，Vue.js 是一个非常流行的前端框架，它提供了丰富的功能来简化复杂的用户界面开发。本文将详细介绍如何使用 Vue.js 进行 AJAX 请求，并探讨如何实现数据的动态响应。通过本文，你将学会如何使用 vue-resource 库进行 GET 和 POST 请求，以及如何使用 Vue 的响应式系统来管理数据。

什么是 vue-resource？

vue-resource 是一个用于 Vue.js 的 HTTP 客户端库，可以帮助你在 Vue 应用中轻松地进行 AJAX 请求。虽然 Vue 2.0 推荐使用 axios，但 vue-resource 仍然是一个非常实用的选择，特别是在一些简单的项目中。

引入 vue-resource

首先，你需要在项目中引入 vue-resource 库。可以通过 CDN 方式引入：

<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

GET 请求

简单的 GET 请求

下面是一个简单的 GET 请求示例，我们将从服务器获取一个文本文件的内容并显示在页面上：

<div id="app">

<p>{{ msg }}</p>
  <button @click="fetchData">获取数据</button>
</div>

<script>
window.onload = function () {
  var vm = new Vue({
    el: '#app',
    data: {
      msg: 'Hello World!'
    },
    methods: {
      fetchData: function () {
        // 发送 GET 请求
        this.$http.get('/try/ajax/ajax_info.txt')
          .then(function (response) {
            this.msg = response.body;
          }, function (error) {
            console.log('请求失败处理');
          });
      }
    }
  });
};
</script>

在这个示例中，我们定义了一个 Vue 实例，并在 methods 中定义了一个 fetchData 方法。当用户点击按钮时，会触发 fetchData 方法，发送一个 GET 请求并更新 msg 数据。

带参数的 GET 请求

如果你需要在 GET 请求中传递参数，可以使用 params 选项：

this.$http.get('/get.php', { params: { a: 1, b: 2 } })
  .then(function (response) {
    this.msg = response.body;
  }, function (error) {
    console.log(error.status);
  });

POST 请求

发送 POST 请求

POST 请求通常用于向服务器发送数据。在 vue-resource 中，发送 POST 请求也非常简单：

<div id="app">

<p>{{ msg }}</p>
  <button @click="postData">发送数据</button>
</div>

<script>
window.onload = function () {
  var vm = new Vue({
    el: '#app',
    data: {
      msg: 'Hello World!'
    },
    methods: {
      postData: function () {
        // 发送 POST 请求
        this.$http.post('/try/ajax/demo_test_post.php', {
          name: '菜鸟教程',
          url: 'http://www.runoob.com'
        }, {
          emulateJSON: true
        }).then(function (response) {
          this.msg = response.body;
        }, function (error) {
          console.log(error.status);
        });
      }
    }
  });
};
</script>

在这个示例中，我们定义了一个 postData 方法，用于发送 POST 请求并将数据发送到服务器。emulateJSON: true 选项用于确保数据以 application/x-www-form-urlencoded 格式发送。

服务器端处理

服务器端的 PHP 代码如下：

<?php
$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$url = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
echo '网站名: ' . $name;
echo "\n";
echo 'URL 地址: ' . $url;
?>

语法与 API

vue-resource 提供了多种 HTTP 请求方法，包括 get、post、put、delete 等。这些方法都可以通过全局 Vue.http 对象或 Vue 实例的 this.$http 来调用。

// 全局调用
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

// 实例内调用
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);

this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

请求选项

vue-resource 的请求选项包括但不限于以下内容：

响应对象

vue-resource 返回的响应对象包含以下属性和方法：

数据响应

Vue.js 的响应式系统使得数据管理变得非常方便。我们可以通过 $watch 方法来监听数据的变化，并在数据变化时执行相应的操作。

监听数据变化

下面是一个简单的示例，展示了如何使用 $watch 监听数据变化：

<div id="app">
  <p style="font-size: 25px;">计数器: {{ counter }}</p>
  <button @click="counter++" style="font-size: 25px;">点我</button>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    counter: 1
  }
});

vm.$watch('counter', function (newVal, oldVal) {
  alert('计数器值的变化: ' + oldVal + ' 变为 ' + newVal + '!');
});

setTimeout(function () {
  vm.counter += 20;
}, 10000);
</script>

在这个示例中，我们定义了一个 counter 数据，并使用 $watch 监听其变化。当 counter 发生变化时，会弹出一个提示框显示变化前后的新旧值。

动态添加属性

Vue 不能检测到对象属性的添加或删除。如果需要在运行时动态添加属性，可以使用 Vue.set 方法：

<div id="app">
  <p style="font-size: 25px;">计数器: {{ products.id }}</p>
  <button @click="products.id++" style="font-size: 25px;">点我</button>
</div>

<script>
var myProduct = { id: 1, name: 'book', price: '20.00' };
var vm = new Vue({
  el: '#app',
  data: {
    products: myProduct
  }
});

Vue.set(myProduct, 'qty', 1);

vm.$watch('products.id', function (newVal, oldVal) {
  alert('计数器值的变化: ' + oldVal + ' 变为 ' + newVal + '!');
});
</script>

在这个示例中，我们使用 Vue.set 方法动态添加了一个 qty 属性，并成功实现了响应式。

删除属性

如果需要删除动态添加的属性，可以使用 Vue.delete 方法：

<div id="app">
  <p style="font-size: 25px;">计数器: {{ products.id }}</p>
  <button @click="products.id++" style="font-size: 25px;">点我</button>
</div>

<script>
var myProduct = { id: 1, name: 'book', price: '20.00' };
var vm = new Vue({
  el: '#app',
  data: {
    products: myProduct
  }
});

Vue.delete(myProduct, 'price');

vm.$watch('products.id', function (newVal, oldVal) {
  alert('计数器值的变化: ' + oldVal + ' 变为 ' + newVal + '!');
});
</script>

在这个示例中，我们使用 Vue.delete 方法删除了 price 属性，并成功实现了响应式。

总结

通过本文，你学会了如何使用 vue-resource 进行 AJAX 请求，并了解了 Vue.js 的响应式系统。无论是简单的 GET 请求还是复杂的 POST 请求，vue-resource 都能提供强大的支持。同时，通过 $watch、Vue.set 和 Vue.delete 方法，你可以灵活地管理数据的变化，实现更加动态和响应式的用户界面。

希望本文对你有所帮助，如果你有任何问题或建议，欢迎留言交流！