Vue小知识点、Ajax

设置非父子通信：

bus.js文件（和main.js同级）

import Vue from 'vue';
export default new Vue();

需要在哪使用就在那导入：

import bus from "./bus";

main.js文件 ：

// main.js所导入的资源，任何vue文件都可以直接使用
// 导入css样式  样式覆盖
import './assets/font-awesome/css/font-awesome.css';
import './assets/style.css';

Ajax：

<script src="../assets/jquery.js"></script>
<template>
  <div class="contact">
    <head-nav>
      <span slot="text">联系人</span>
      <span slot="icon">
        <i class="fa fa-user"></i>
      </span>
    </head-nav>
    <button class="get" @click="getData">get获取</button>
    <button class="post" @click="postData">post获取</button>
    <form action="/aaa" @submit.prevent="getData" method="get">
      <input type="text" name="username" />
      <br />
      <input type="email" name="email" />
      <br />
      <button type="submit">提交</button>
    </form>

    <form action="/aaa" @submit.prevent="postData" method="post">
      <input type="text" name="username" />
      <br />
      <input type="email" name="email" />
      <br />
      <button type="submit">post提交</button>
    </form>

    <form action="/aaa" @submit.prevent="newData" method="post">
      <input type="text" name="username" />
      <br />
      <input type="email" name="email" />
      <br />
      <button type="submit">表单数据提交</button>
    </form>
  </div>
</template>

<script>
// 导入jquery

import HeadNav from "../components/HeadNav.vue";
export default {
  data: function() {
    return {};
  },
  components: {
    HeadNav
  },
  methods: {
    getData(ev) {
      console.log("即将发送get请求...");
      // form表单默认的请求，会自动跳转至另外一个页面，也无法进行数据验证
      // 发送数据的请求，通常采取AJAX，优点：在不重载页面的情况下，与服务器进行数据对接,可以在表单提交之前进行数据验证，验证数据是否符合某个条件
      // AJAX依赖的核心对象 XMLHttpRequest
      // XML: 存储和传输数据
      // HTTP: 超文本传输协议
      // Request: 请求
      // ev 默认的事件
      //        ev.preventDefault();   // 阻止默认事件
      var xhr = new XMLHttpRequest(); // 获取xhr对象

      // 发送请求   使用get方法发送请求，并传递数据   ，
      // 仅仅是设置请求属性
      xhr.open("GET", "/aaa?username=张三&email=12345");
      // 发送数据
      xhr.send();

      // xhr.open('POST', '/aaa');
      // xhr.send('username=张三&email=12345')

      //  接收服务器端返回的响应数据 ，通过事件
      xhr.onreadystatechange = function(res) {
        if (xhr.status == 200 && xhr.readyState == 4) {
          console.log(res);
        }
      };
    },
    postData() {
      console.log($);
      // jquery版本的ajax写法

      // $.get(path, data, callback)
      // callback 请求成功的回调函数，参数是返回的响应数据
      // $.get(path, data, callback)

      //        $.get('/aaa', {name: '张三'}, function (res) {
      //          console.log(res);
      //        })
      //
      //        $.post('/aaa', {name: '张三'}, function (res) {
      //          console.log(res);
      //        })

      //        console.log(this);

      // 参数1：请求路径
      // 参数2： 请求的数据，如果没有请求或者数据，为''，表单中的数据
      // 数据格式：可以是name=value&name=value，也可以是对象
      // 参数3： 请求成功的回调函数
      $.get(
        "https://cnodejs.org/api/v1/topics",
        { name: "张三", age: 100 },
        function(res) {
          console.log(res);
        }
      );
    },
    newData(ev) {
      // 获取表单数据，发送请求，得到响应数据
      // ev 表单提交事件，
      // 获取form标签
      console.log(ev.target);
      // jquery获取表单数据的方法 ，得到的数据格式是name=value&name=value，被称为字符串序列对
      let val = $(ev.target).serialize();
      console.log(val);
      $.get("/aaa", val, function(res) {
        console.log(res);
      });
    }
  }
};
</script>

<style scoped>
.contact {
  padding: 60px 0;
}
</style>

 

来源：CSDN

作者：洪布斯

链接：https://blog.csdn.net/qq_45631813/article/details/103605299