ajax.html 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <title></title>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <script src="https://unpkg.com/vue/dist/vue.js"></script>
  8. <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  9. <link href="../css/style.css" rel="stylesheet"> </head>
  10. <body>
  11. <div id="myApp">
  12. <input type="button" @click="btnGet()" value="点我异步获取数据(Get)">
  13. </div>
  14. <script>
  15. var vm = new Vue({
  16. el: '#myApp',
  17. data: {
  18. msg: 'Hello World!',
  19. },
  20. methods: {
  21. btnGet: function() {
  22. //发送get请求
  23. var data = {
  24. a: 1,
  25. b: 2
  26. };
  27. this.$http.get('ajax_info.txt', data).then(function(res) {
  28. document.write("<h3>已经获取到数据:</h3>");
  29. document.write(res.body);
  30. }, function() {
  31. console.log('请求失败处理');
  32. });
  33. },
  34. btnPost:function(){
  35. //post请求
  36. }
  37. }
  38. });
  39. </script>
  40. </body>
  41. </html>