如何通过Azure Function将HTML表单数据存入数据库？

我来一步步帮你实现从HTML表单收集数据，再通过Azure Function存入数据库的完整流程，每个环节都给你讲得明明白白：

首先你需要一个能提交用户基本信息的表单，用POST方法把数据发送到你的Azure Function地址。这里给你一个简单的可直接复用的示例：

<!DOCTYPE html>
<html>
<head>
    <title>用户信息收集</title>
</head>
<body>
    <form action="https://your-function-app-name.azurewebsites.net/api/SaveUserInfo" method="POST">
        <label for="name">姓名:</label>
        <input type="text" id="name" name="fullName" required><br><br>
        
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" required><br><br>
        
        <label for="phone">电话:</label>
        <input type="tel" id="phone" name="phoneNumber"><br><br>
        
        <input type="submit" value="提交">
    </form>
</body>
</html>

记得把action里的URL替换成你自己的Azure Function触发地址。

接下来创建一个HTTP触发的Azure Function，用来接收表单提交的数据，然后写入数据库。下面给你两种常用语言的实现示例：

示例1：C#版Azure Function #

用C#的话，我们通过HttpRequest获取表单数据，再用参数化查询插入数据库（彻底避免SQL注入风险）：

using System;
using System.Data.SqlClient;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Azure.WebJobs;
using Microsoft.Azure.WebJobs.Extensions.Http;
using Microsoft.Extensions.Logging;

namespace UserInfoFunction
{
    public static class SaveUserInfo
    {
        [FunctionName("SaveUserInfo")]
        public static async Task<IActionResult> Run(
            [HttpTrigger(AuthorizationLevel.Function, "post", Route = null)] HttpRequest req,
            ILogger log)
        {
            log.LogInformation("收到用户信息提交请求");

            // 从表单中提取数据
            string fullName = req.Form["fullName"];
            string email = req.Form["email"];
            string phoneNumber = req.Form["phoneNumber"];

            // 后端二次验证必填字段（前端验证可能被绕过）
            if (string.IsNullOrEmpty(fullName) || string.IsNullOrEmpty(email))
            {
                return new BadRequestObjectResult("姓名和邮箱为必填项");
            }

            // 从环境变量读取数据库连接字符串（绝对不要硬编码！）
            string connectionString = Environment.GetEnvironmentVariable("DbConnectionString");

            try
            {
                using (SqlConnection conn = new SqlConnection(connectionString))
                {
                    await conn.OpenAsync();
                    string sql = "INSERT INTO UserInfo (FullName, Email, PhoneNumber) VALUES (@FullName, @Email, @PhoneNumber)";
                    using (SqlCommand cmd = new SqlCommand(sql, conn))
                    {
                        // 参数化查询，杜绝SQL注入
                        cmd.Parameters.AddWithValue("@FullName", fullName);
                        cmd.Parameters.AddWithValue("@Email", email);
                        cmd.Parameters.AddWithValue("@PhoneNumber", phoneNumber ?? string.Empty);
                        await cmd.ExecuteNonQueryAsync();
                    }
                }
                return new OkObjectResult("用户信息保存成功");
            }
            catch (Exception ex)
            {
                log.LogError(ex, "保存用户信息时发生错误");
                return new StatusCodeResult(StatusCodes.Status500InternalServerError);
            }
        }
    }
}

示例2：Node.js版Azure Function #

如果用Node.js，我们可以借助mssql库连接SQL Server，同样用参数化查询保障安全：

const sql = require('mssql');

module.exports = async function (context, req) {
    context.log('收到用户信息提交请求');

    // 获取表单数据
    const fullName = req.body.fullName;
    const email = req.body.email;
    const phoneNumber = req.body.phoneNumber || '';

    // 后端验证必填字段
    if (!fullName || !email) {
        context.res = {
            status: 400,
            body: "姓名和邮箱为必填项"
        };
        return;
    }

    // 从环境变量读取连接字符串
    const connectionString = process.env.DbConnectionString;

    try {
        await sql.connect(connectionString);
        await sql.query`
            INSERT INTO UserInfo (FullName, Email, PhoneNumber)
            VALUES (${fullName}, ${email}, ${phoneNumber})
        `;
        context.res = {
            status: 200,
            body: "用户信息保存成功"
        };
    } catch (err) {
        context.log.error(err, "保存用户信息时发生错误");
        context.res = {
            status: 500,
            body: "服务器内部错误"
        };
    } finally {
        await sql.close();
    }
};

为了数据安全，绝对不能把数据库连接字符串硬编码到代码里。你需要在Azure Function App的配置 -> 应用程序设置中，添加一个名为DbConnectionString的变量，值就是你的数据库连接字符串（比如SQL Server的标准连接字符串）。这样代码就能通过环境变量安全读取了。

• 跨域问题：如果你的HTML页面和Azure Function不在同一个域名下，需要在Azure Function App的CORS设置里添加前端页面的域名，否则浏览器会阻止表单提交。
• SQL注入防护：一定要坚持用参数化查询，绝对不要直接把用户输入拼接进SQL语句，这是数据库安全的基本要求。
• 错误处理：要捕获数据库操作的异常，返回友好的错误提示，同时记录详细日志，方便后续排查问题。
• 数据验证：除了前端的required属性，后端必须做二次验证，防止恶意提交空数据或非法格式的数据。

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