15207938132
/
202226701051


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
							<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>form 表单页面</title>
</head>
<body>
  <!-- 创建一个表单，提交到本地服务器的 /post/index 路径 -->
  <form id="myForm" action="http://localhost:3000/post/index" method="post" style="width: 245px;">
    <div>
      <label>用户名：
        <input type="text" name="iptuname" id="uname" /> <!-- 用户名输入框 -->
      </label>
    </div><br/>
    <div>
      <label>密码：
        <input type="password" name="iptpwd" id="pwd" /> <!-- 密码输入框 -->
      </label>
    </div><br/>
    <button type="button" id="btn">检测用户是否存在</button><br/> <!-- 检测用户存在的按钮 -->
    <input type="submit" value="发送 POST 请求" /><br/> <!-- 提交表单的按钮 -->
  </form>
  <script>

    window.onload = function () {

      // 禁用表单的默认提交行为

      document.getElementById('myForm').onsubmit = function () {

        return false; // 返回 false，阻止表单提交

      }

      // 监听“检测用户是否存在”按钮的点击事件

      document.getElementById('btn').addEventListener("click", function () {

        var xhr = new XMLHttpRequest(); // 创建 XMLHttpRequest 对象

        xhr.open("POST", "http://localhost:3000/post", true); // 设定请求类型和 URL

        // 设置请求头，指定发送的数据类型为 JSON

        xhr.setRequestHeader("Content-Type", "application/json");

        // 获取输入框的值

        var uname = document.getElementById('uname').value; // 获取用户名

        var pwd = document.getElementById('pwd').value; // 获取密码

        // 构建请求体，将数据转换为 JSON 字符串

        var data = JSON.stringify({

          iptuname: uname, // 用户名字段

          iptpwd: pwd // 密码字段

        });

        // 发送请求

        xhr.send(data);

        // 监听请求状态变化

        xhr.onreadystatechange = function () {

          if (xhr.readyState === 4) { // 请求完成

            if (xhr.status === 200) { // 请求成功

              var obj = JSON.parse(xhr.responseText); // 解析返回的 JSON 数据

              console.log("响应数据: ", obj); // 在控制台输出响应数据

              alert("返回的用户名: " + obj.uname); // 弹出返回的用户名

            } else {

              console.log("请求失败: " + xhr.status); // 记录请求失败的状态

            }

          }

        }

      });

    }

  </script>
</body>
</html>