点击即搜学生信息，学管也能如此轻松！

前端

2023-02-13 12:17:38

利用 AJAX 技术，学管老师轻松玩转学生信息检索！

学管工作繁杂，查找学生信息往往成为老师们的难题。随着 AJAX 技术的兴起，这一难题迎刃而解！AJAX 赋予学管老师们以下超能力：

按需查找： 只需一键，轻松找到学生姓名、联系电话、性别、年级和备注等信息。
实时响应： 信息更新即时生效，告别信息滞后的烦恼。
精准筛选： 根据搜索条件快速筛选学生信息，高效定位目标。

AJAX 技术详解

AJAX 的全称是 Asynchronous JavaScript and XML，是一种实现网页与服务器异步交互的技术。它的精妙之处在于，网页无需刷新，只将部分数据提交给服务器，服务器返回相应数据后直接更新到网页上。

打造实时搜索功能的步骤

第一步：准备工作

安装 Node.js、npm、Express、MongoDB、Mongoose 等工具。
创建 Node.js 项目和数据库。

第二步：后端开发

定义学生信息数据结构。
创建路由处理用户请求。
连接数据库并实现搜索功能。

第三步：前端开发

创建 HTML 页面展示搜索结果。
引入 AJAX 脚本。
实现搜索功能，向后端发送请求并接收数据。
渲染搜索结果到页面上。

第四步：测试

启动服务器。
打开浏览器测试搜索功能。

代码示例

后端 JavaScript

const express = require('express');
const mongoose = require('mongoose');

const Student = mongoose.model('Student', new mongoose.Schema({
  name: String,
  phone: String,
  gender: String,
  grade: Number,
  remarks: String
}));

const app = express();

app.get('/students', async (req, res) => {
  const { name } = req.query;
  const students = await Student.find({ name });
  res.json(students);
});

前端 HTML

<form>
  <input type="text" id="name" placeholder="学生姓名">
  <button type="submit">搜索</button>
</form>

<div id="results"></div>

<script>
  const form = document.querySelector('form');
  form.addEventListener('submit', e => {
    e.preventDefault();
    const name = document.querySelector('#name').value;
    fetch(`/students?name=${name}`)
      .then(res => res.json())
      .then(data => {
        const results = document.querySelector('#results');
        results.innerHTML = '';
        data.forEach(student => {
          results.innerHTML += `<p>${student.name} - ${student.phone} - ${student.gender} - ${student.grade} - ${student.remarks}</p>`;
        });
      })
      .catch(err => console.error(err));
  });
</script>