求助：如何连接两段JS代码并将HTML表单数据写入SQL数据库

你提供的两段代码分别运行在前端浏览器环境（第一段jQuery代码）和Node.js后端环境（第二段tedious数据库操作代码），不能直接合并到同一个文件里，需要通过前后端接口通信完成数据传递。下面是具体的整合实现步骤：

一、前端代码优化（浏览器端） #

去掉冗余逻辑，确保表单提交时正确收集数据并发送到后端接口：

$(document).ready(function() {
  // 监听表单提交事件，阻止默认跳转
  $(document).on('submit', 'form', function(e) {
    e.preventDefault();
    
    // 收集表单字段值
    const formData = {
      Title: $('#Title').val(),
      Subtitle: $('#Subtitle').val(),
      Body: $('#Body').val()
    };

    // 发送POST请求到后端接口
    $.ajax({
      type: 'POST',
      data: formData,
      url: "/adddata",
      success: function(response) {
        console.log('数据提交成功:', response);
        // 可添加成功提示、清空表单等操作
      },
      error: function(xhr, status, error) {
        console.error('提交失败:', error);
        // 可添加错误提示逻辑
      }
    });
  });

  // 查看全部数据的按钮点击事件
  $("#submit").click(function() {
    $.ajax({
      type: 'GET',
      dataType: "json",
      url: "/alldata",
      success: function(data) {
        console.log('获取到的数据:', data);
        // 可添加数据渲染到页面的逻辑
      },
      error: function(xhr, status, error) {
        console.error('获取数据失败:', error);
      }
    });
  });
});

二、后端Node.js代码（服务器端） #

使用Express框架创建接口，接收前端数据后通过tedious写入SQL数据库。

1. 安装依赖 #

在终端执行：

npm install express tedious body-parser

2. 编写后端代码（示例文件：server.js） #

const express = require('express');
const bodyParser = require('body-parser');
const { Connection, Request, TYPES } = require('tedious');

const app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// 数据库配置，请根据实际情况修改
const dbConfig = {  
  server: 'localhost',
  authentication: {
    type: 'default',
    options: {
      userName: '你的数据库用户名',
      password: '你的数据库密码'
    }
  },
  options: {
    encrypt: true, // 若使用Azure数据库需开启
    trustServerCertificate: true,
    database: 'Healthcare'
  }
};

// 创建数据库连接的工具函数
function getDbConnection() {
  return new Promise((resolve, reject) => {
    const connection = new Connection(dbConfig);
    connection.on('connect', (err) => {
      if (err) {
        console.error('数据库连接失败:', err);
        reject(err);
      } else {
        console.log('数据库已连接');
        resolve(connection);
      }
    });
    connection.connect();
  });
}

// 处理添加数据的POST接口
app.post('/adddata', async (req, res) => {
  try {
    const { Title, Subtitle, Body } = req.body;
    const connection = await getDbConnection();

    // 构建插入SQL请求
    const insertRequest = new Request(
      "INSERT INTO dbo.Core (Title, Subtitle, Body) VALUES (@Title, @Subtitle, @Body);",
      (err) => {
        if (err) {
          console.error('插入数据失败:', err);
          res.status(500).send('数据插入失败');
        } else {
          res.send('数据插入成功');
        }
        connection.close(); // 操作完成后关闭连接
      }
    );

    // 绑定前端传递的参数
    insertRequest.addParameter('Title', TYPES.NVarChar, Title);
    insertRequest.addParameter('Subtitle', TYPES.NVarChar, Subtitle);
    insertRequest.addParameter('Body', TYPES.NVarChar, Body);

    connection.execSql(insertRequest);
  } catch (err) {
    res.status(500).send('数据库连接失败');
  }
});

// 处理获取全部数据的GET接口
app.get('/alldata', async (req, res) => {
  try {
    const connection = await getDbConnection();
    const resultList = [];

    const queryRequest = new Request("SELECT * FROM dbo.Core;", (err) => {
      if (err) {
        console.error('查询数据失败:', err);
        res.status(500).send('数据查询失败');
      } else {
        res.json(resultList);
      }
      connection.close();
    });

    // 处理查询结果，转换为JSON格式
    queryRequest.on('row', (columns) => {
      const row = {};
      columns.forEach(column => {
        row[column.metadata.colName] = column.value;
      });
      resultList.push(row);
    });

    connection.execSql(queryRequest);
  } catch (err) {
    res.status(500).send('数据库连接失败');
  }
});

// 启动服务器
const port = 3000;
app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

三、关键注意事项 #

• 确保SQL Server已启动，Healthcare数据库和dbo.Core表存在，且表结构包含Title、Subtitle、Body三个字段。
• 后端代码中的数据库配置（服务器地址、用户名、密码）必须填写正确。
• 前端页面需引入jQuery库，且表单字段ID需与代码中的#Title、#Subtitle、#Body对应，按钮ID为submit。
• 运行后端服务器：在终端执行node server.js，再打开前端页面进行测试。

内容的提问来源于stack exchange，提问作者Neil Faulkner