js读取mysql表格数据

基础概念

JavaScript（JS）是一种广泛使用的脚本语言，主要用于网页开发，增强网页的交互性。MySQL是一种关系型数据库管理系统，用于存储和管理数据。JS读取MySQL表格数据通常涉及到后端服务器的配合，因为JS本身无法直接与数据库进行交互。

类型

同步读取：传统的HTTP请求方式，客户端发送请求，服务器返回数据，整个过程是同步的。
异步读取：使用AJAX技术，客户端发送请求后可以继续执行其他任务，服务器返回数据后再进行处理。

应用场景

数据展示：在网页上展示数据库中的数据。
数据交互：用户通过网页进行数据操作，如增删改查。
实时监控：实时获取数据库中的数据并更新到网页上。

遇到的问题及解决方法

问题：为什么JS无法直接读取MySQL数据？

原因：JS运行在客户端浏览器中，而MySQL数据库通常运行在服务器端。出于安全考虑，浏览器不允许JS直接访问服务器端的数据库。

解决方法：通过服务器端脚本（如Node.js、PHP等）作为中间层，JS通过AJAX请求服务器端脚本，服务器端脚本再与MySQL数据库进行交互。

问题：如何实现JS读取MySQL数据？

解决方法：

服务器端脚本：使用Node.js和Express框架搭建一个简单的服务器。
数据库连接：使用mysql模块连接MySQL数据库。
API接口：创建一个API接口，供JS通过AJAX请求。

示例代码：

服务器端（Node.js + Express + mysql）：

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

const app = express();
const port = 3000;

// 创建MySQL连接
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'mydatabase'
});

connection.connect();

// 创建API接口
app.get('/data', (req, res) => {
  connection.query('SELECT * FROM mytable', (error, results) => {
    if (error) throw error;
    res.json(results);
  });
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

客户端（HTML + JS）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS读取MySQL数据</title>
</head>
<body>
  <div id="data"></div>

  <script>
    fetch('http://localhost:3000/data')
      .then(response => response.json())
      .then(data => {
        const dataDiv = document.getElementById('data');
        data.forEach(item => {
          const p = document.createElement('p');
          p.textContent = item.name;
          dataDiv.appendChild(p);
        });
      })
      .catch(error => console.error('Error:', error));
  </script>
</body>
</html>