如何在HTML页面中实现登录时判断用户是否在数据库表中已经存在，若存在则登录成功，并跳转到相应的界面若不存在则显示用户不存在，数据库用MySQL，后端用JS语言写

在HTML页面中实现这样的功能通常涉及前端JavaScript、Ajax请求以及后端的PHP或Node.js（这里假设使用的是PHP）。以下是一个基本步骤：

1. **HTML表单提交**:
用户填写用户名和密码后，通过表单的`onsubmit`事件，发送一个POST请求到服务器。

<form id="loginForm" onsubmit="event.preventDefault(); checkLogin()">
  <input type="text" name="username" placeholder="用户名">
  <input type="password" name="password" placeholder="密码">
  <button type="submit">登录</button>
</form>

2. **JavaScript函数检查登录**:
这部分通常会阻止表单默认的提交行为，然后异步发送数据到服务器。

function checkLogin() {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/check_login');
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.onreadystatechange = function () {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      var response = JSON.parse(xhr.responseText);
      handleResponse(response);
    }
  };
  xhr.send('username=' + encodeURIComponent(document.getElementById('username').value));
}

3. **后端处理**:
PHP（或其他服务器端语言如Node.js）接收这个POST请求，查询MySQL数据库，检查用户名是否存在。

// server-side (PHP)
<?php
session_start();

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
  $username = $_POST['username'];
  
  // 连接到MySQL
  $conn = mysqli_connect("localhost", "username", "password", "database");
  if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
  }

  // 查询用户名是否存在
  $stmt = $conn->prepare("SELECT * FROM users WHERE username = ?");
  $stmt->bind_param("s", $username);
  $stmt->execute();
  $result = $stmt->get_result();

  // 根据结果处理
  if ($result->num_rows > 0) {
    // 登录成功
    $_SESSION['logged_in'] = true;
    header("Location: dashboard.php"); // 跳转到首页
    exit;
  } else {
    // 用户名不存在
    echo json_encode(array('status' => false, 'message' => '用户名不存在'));
  }
  $stmt->close();
  $conn->close();
}
?>

4. **处理响应**:
JavaScript接收到服务器返回的JSON数据后，根据状态更新页面或显示错误消息。

function handleResponse(response) {
  if (response.status) {
    // 用户已存在并登录成功
  } else {
    alert(response.message); // 显示“用户不存在”等提示信息
  }
}