form-axios提交数据

form-axios提交数据

<body>
    <h2>ajax+form</h2>
    <!-- 
      action 提交的接口地址
      method 提交的方法
     -->
    <form action="http://ajax-api.itheima.net/api/data" method="post">
      <!-- name 提交到服务器数据的 key -->
      <input
        class="username"
        name="username"
        type="text"
        placeholder="请输入用户名"
      />
      <br />
      <input
        class="food"
        name="food"
        type="text"
        placeholder="请输入喜欢的食物"
      />
      <br />
      <input
        class="sign"
        name="sign"
        type="textarea"
        placeholder="请输入个性签名"
      />
      <br />
      <input
        class="male"
        name="male"
        type="textarea"
        placeholder="请输入性别"
      />
      <br />
      <button type="submit">提交</button>
    </form>
    <script src="./lib/axios.js"></script>
    <script>
      // form-axios提交数据
      document.querySelector("form").addEventListener("submit", (e) => {
        e.preventDefault();
        axios({
          method: "post",
          url: "http://ajax-api.itheima.net/api/data",
          data: {
            username: document.querySelector(".username").value,
            food: document.querySelector(".food").value,
            sign: document.querySelector(".sign").value,
            male: document.querySelector(".male").value,
          },
        }).then((res) => {
          console.log(res);
        });
      });
    </script>
  </body>