JS特效：学生信息录入系统，信息录入的直观与方便！

人工智能

2023-10-05 03:42:50

JavaScript 特效：让学生信息录入变得轻而易举

在现代 Web 开发中，JavaScript 已成为一种不可或缺的工具，它可以实现令人惊叹的交互式体验和视觉效果。本文将探讨如何利用 JavaScript 的强大功能来增强学生信息录入系统，使其变得更加直观和用户友好。

项目架构

我们的项目将由以下几个部分组成：

学生信息录入表单
JavaScript 特效代码
数据提交后台

实现步骤

1. 学生信息录入表单

首先，我们需要创建一个学生信息录入表单，其中包含以下字段：

姓名
学号
性别
年龄
班级
成绩

2. JavaScript 特效代码

JavaScript 特效代码负责实现表单验证、数据提交和用户界面动画效果。

表单验证

JavaScript 可以帮助我们验证用户输入的信息，确保所有必填字段都已填写，并检查数据格式是否正确。

数据提交

当用户提交表单时，JavaScript 将收集输入的信息并通过 Ajax（异步 JavaScript 和 XML）发送到服务器，以便进一步处理。

用户界面动画效果

JavaScript 可以创建引人注目的动画效果，例如淡入、淡出和滑动，以增强用户体验，让信息录入过程更加愉快。

3. 数据提交后台

数据提交后台负责接收来自 JavaScript 的数据并将其存储在数据库中。

效果预览

当用户在表单中输入信息并提交时，他们会看到一个流畅的动画，表明数据正在提交。提交成功后，用户会收到一个确认消息。

代码示例

为了更好地理解如何实现这些特效，我们提供了一个代码示例：

HTML 表单

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <form id="student-info-form">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name">
    <br>
    <label for="student-id">学号：</label>
    <input type="text" id="student-id" name="student-id">
    <br>
    <label for="gender">性别：</label>
    <input type="radio" id="male" name="gender" value="男">
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="女">
    <label for="female">女</label>
    <br>
    <label for="age">年龄：</label>
    <input type="number" id="age" name="age">
    <br>
    <label for="class">班级：</label>
    <input type="text" id="class" name="class">
    <br>
    <label for="score">成绩：</label>
    <input type="number" id="score" name="score">
    <br>
    <input type="submit" value="提交">
  </form>
</body>
</html>

JavaScript 代码

// 表单验证
function validateForm() {
  var name = document.getElementById("name").value;
  var studentId = document.getElementById("student-id").value;
  var gender = document.querySelector('input[name="gender"]:checked').value;
  var age = document.getElementById("age").value;
  var clazz = document.getElementById("class").value;
  var score = document.getElementById("score").value;

  if (name == "" || studentId == "" || gender == "" || age == "" || clazz == "" || score == "") {
    alert("请填写完整信息！");
    return false;
  }

  return true;
}

// 数据提交
function submitForm() {
  if (validateForm()) {
    var data = {
      name: name,
      studentId: studentId,
      gender: gender,
      age: age,
      clazz: clazz,
      score: score
    };

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "submit.php", true);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(JSON.stringify(data));

    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && xhr.status == 200) {
        alert("提交成功！");
      }
    };
  }
}

// 动画效果
function showAnimation() {
  var form = document.getElementById("student-info-form");
  form.classList.add("animated");
  form.classList.add("fadeInUp");
}

// 事件监听
document.addEventListener("DOMContentLoaded", function() {
  showAnimation();

  document.getElementById("student-info-form").addEventListener("submit", function(e) {
    e.preventDefault();
    submitForm();
  });
});

PHP 提交后台

<?php
// 接收数据
$data = json_decode(file_get_contents("php://input"), true);

// 保存数据
$name = $data["name"];
$studentId = $data["studentId"];
$gender = $data["gender"];
$age = $data["age"];
$clazz = $data["clazz"];
$score = $data["score"];

$conn = new mysqli("localhost", "root", "", "student_info");
$sql = "INSERT INTO student_info (name, student_id, gender, age, class, score) VALUES ('$name', '$studentId', '$gender', $age, '$clazz', $score)";

if ($conn->query($sql) === TRUE) {
  echo "提交成功！";
} else {
  echo "提交失败！";
}

$conn->close();
?>