Node+Expres+jQuery+Ajax+Mysql+Template+Bootstrap.select制作省-城市-县城三级联动功能

以下是使用Node.js, Express, jQuery, Ajax, MySQL, 以及 Bootstrap Select 创建省-市-县三级联动下拉菜单的基本示例代码。

首先，确保你已经安装了Node.js和MySQL。

安装Express和MySQL连接器：




npm install express mysql

创建一个简单的Express服务器，并设置路由以处理Ajax请求：




const express = require('express');
const mysql = require('mysql');
const app = express();
 
// 连接MySQL数据库
const connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'your_username',
  password : 'your_password',
  database : 'your_database'
});
 
connection.connect();
 
// 省市县的Ajax接口
app.get('/api/provinces', (req, res) => {
  connection.query('SELECT * FROM provinces', (error, results) => {
    if (error) throw error;
    res.json(results);
  });
});
 
app.get('/api/cities/:provinceId', (req, res) => {
  const provinceId = req.params.provinceId;
  connection.query('SELECT * FROM cities WHERE provinceId = ?', [provinceId], (error, results) => {
    if (error) throw error;
    res.json(results);
  });
});
 
app.get('/api/districts/:cityId', (req, res) => {
  const cityId = req.params.cityId;
  connection.query('SELECT * FROM districts WHERE cityId = ?', [cityId], (error, results) => {
    if (error) throw error;
    res.json(results);
  });
});
 
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

创建数据库表：




CREATE TABLE provinces (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(255) NOT NULL
);
 
CREATE TABLE cities (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(255) NOT NULL,
  provinceId INT,
  FOREIGN KEY (provinceId) REFERENCES provinces(id)
);
 
CREATE TABLE districts (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(255) NOT NULL,
  cityId INT,
  FOREIGN KEY (cityId) REFERENCES cities(id)
);

创建HTML页面，并使用jQuery和Ajax加载省市县数据，并使用Bootstrap Select插件显示下拉菜单：




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>三级联动下拉菜单</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstra

Node+Expres+jQuery+Ajax+Mysql+Template+Bootstrap.select制作省-城市-县城三级联动功能

评论已关闭

推荐阅读