前言：JQuery 依然是后台开发的利器

在零点博客的历次更新中，很多人问为什么不直接上 Vue 或 React，对于这类轻量级的在线工具开发，我依然倾向于使用 JQuery。为什么？因为它够轻、够快，且对老项目（如 EMLOG 主题）的兼容性极好。今天咱们不扯虚的，直接拿一个实际的业务场景：用户在页面上输入数据，通过 AJAX 异步提交给 C# 后端，后端进行校验并写入 MySQL，整个过程完全无刷新，并且要解决最头疼的 SQL 注入防护 问题。

一、前端设计：JQuery + HTML5 表单交互

首先，咱们看前端 HTML 结构。我们不需要写复杂的大页面，核心是一个表单和一段脚本。

在提交时，我们不使用传统的表单提交，而是拦截 submit 事件，使用 JQuery 的 $.ajax 方法。这是实现异步交互的核心。

<form id="toolForm">
    <input type="text" id="username" placeholder="请输入昵称" required>
    <input type="email" id="email" placeholder="请输入邮箱" required>
    <button type="submit">提交数据</button>
</form>

// 真实开发复盘：JQuery 事件监听
$(document).ready(function() {
    $('#toolForm').on('submit', function(e) {
        e.preventDefault(); // 阻止默认表单提交，实现 AJAX 异步

        // 获取数据
        var data = {
            username: $('#username').val(),
            email: $('#email').val()
        };

        // 使用 $.ajax 发送请求
        $.ajax({
            type: "POST",
            url: "/api/SaveUser", // 对应后端 C# 接口地址
            data: JSON.stringify(data), // 前端数据转为 JSON 字符串
            contentType: "application/json",
            dataType: "json",
            success: function(response) {
                if(response.status) {
                    alert("保存成功！");
                }
            }
        });
    });
});

二、后端开发：C# 处理 JSON 与正则校验

数据发过来了，后端怎么接？这里涉及到 JSON/XML 数据解析。在 C# 中，我们可以利用 [FromBody] 特性自动反序列化对象。

[ApiController]
[Route("api/[controller]")]
public class ToolController : ControllerBase
{
    [HttpPost]
    public IActionResult SaveUser([FromBody] UserInfoDto userDto)
    {
        // 1. 简单的客户端校验（虽然不绝对安全，但能过滤垃圾数据）
        string emailPattern = @"^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$";
        if (!Regex.IsMatch(userDto.Email, emailPattern))
        {
            return BadRequest(new { status = false, message = "邮箱格式不正确" });
        }

        // 2. 业务逻辑处理...
        return Ok(new { status = true });
    }
}

三、核心避坑指南：SQL 注入防护与预处理语句

很多新手在用 EMLOG 或 PHP 写插件时容易忽略安全。如果用户在昵称里输入 admin' OR '1'='1，后果很严重。C# 连接 MySQL 时，必须使用 预处理语句。

// 真实避坑演示
public void InsertUser(string username, string email)
{
    string sql = "INSERT INTO users (username, email) VALUES (@username, @email)";

    using (var conn = new MySqlConnection("connection_string"))
    using (var cmd = new MySqlCommand(sql, conn))
    {
        // 关键点：使用参数化查询，数据库会自动转义特殊字符
        cmd.Parameters.AddWithValue("@username", username);
        cmd.Parameters.AddWithValue("@email", email);

        conn.Open();
        cmd.ExecuteNonQuery();
    }
}

你看，通过 @username 这种占位符，无论用户输入什么，数据库都把它当普通字符串处理，彻底杜绝了 SQL 注入 的风险。

四、复盘总结与底层逻辑

通过这个实战案例，我们可以看到，虽然现在前端框架层出不穷，但 JQuery 在处理 DOM 操作和简单 AJAX 请求时依然效率很高。配合 C# 强大的后端处理能力和 MySQL 的预处理机制，我们能开发出既稳定又安全的 在线工具。

在零点博客的后续计划中，我打算把这个逻辑封装成一个通用的 CMS 插件，让更多站长能轻松升级他们的 EMLOG 站点。如果你在开发中遇到接口 404 或者 JSON 解析报错的问题，记得检查一下 Header 里的 Content-Type，很多时候坑都在这儿。