lovecoding
/
VIP20


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="user-insert">
      <form id="userForm">
        <div class="form-item">
          <label for=""
            >姓名：
            <input
              type="text"
              name="name"
              id="name"
              placeholder="输入姓名..."
            />
          </label>
        </div>
        <div class="form-item">
          <label for=""
            >密码：
            <input
              type="password"
              name="password"
              id="password"
              placeholder="输入密码..."
            />
          </label>
        </div>
        <div class="form-item">
          <label for=""
            >年龄：
            <input
              type="number"
              name="age"
              id="age"
              placeholder="输入年龄..."
            />
          </label>
        </div>
        <div class="form-item">
          <select name="sex" id="sex">
            <option value="">请选择性别...</option>
            <option value="1">男</option>
            <option value="0">女</option>
          </select>
        </div>
        <div class="form-item">
          <button>新增</button>
        </div>
      </form>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
      // userForm
      document.querySelector('#userForm').addEventListener('submit', (e) => {
        // 我们自己提交请求，将数据传给服务器存储。因此这里不需要表单默认行为
        e.preventDefault(); // 阻止表单 默认的提交行为
        // e 为 事件对象
        const formEle = e.target;

        // 实际开发时 可以通过表单输入域的name属性来获取该输入域
        // 下面代码 就是 通过表单form 来获取 name属性为 name 的标签值
        // console.log(formEle.name);
        // console.log(formEle.name.value);
        const user = {
          name: formEle.name.value,
          password: formEle.password.value,
          age: formEle.age.value,
          sex: formEle.sex.value,
        };

        console.log(user);

        // 发起post请求，将用户信息 发送给服务器
        // post方法 第一个参数 请求地址；第二参数 请求体
        axios
          .post('http://localhost:3000/users/insert', user)
          .then((result) => {
            let { code, msg } = result.data;

            alert(msg); // 给用户提示

            if (code === 200) {
              // 新增用户操作成功了，页面跳转到主页
              window.location = '../index.html';
            }
          })
          .catch((err) => {});
      });
    </script>
  </body>
</html>