零点博客实战：从0到1开发在线JSON工具，深度解析JQuery与C#后端防注入逻辑

前言：jQuery 依然是开发者的好帮手

在零点博客平时写代码或者帮朋友做EMLOG主题的时候，虽然现在大家都吹捧原生JS和Vue，但我发现JQuery在快速开发、处理DOM元素以及编写简单的交互逻辑时，依然有着不可替代的优势。特别是对于非框架的大型原生项目，jQuery能极大减少代码量。

今天咱们来实战一个在线JSON格式化与校验工具。不依赖庞大的前端框架，纯原生HTML+CSS+JQuery实现。我们还会顺带聊聊这东西后端怎么做，以及那个让人头疼的SQL注入到底该怎么防。

第一步：搭建 HTML 结构与样式

这步比较基础，我们直接创建一个漂亮的输入输出区域。注意，为了让你的网页加载得快，JQuery源码我会直接用 CDN 引用，但核心逻辑我们一定要懂。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>零点博客 jQuery JSON 工具</title>
    <style>
        body { font-family: 'Segoe UI', sans-serif; background: #f4f4f4; padding: 20px; }
        .container { max-width: 800px; margin: 0 auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        textarea { width: 100%; height: 200px; padding: 10px; box-sizing: border-box; margin-bottom: 10px; border: 1px solid #ddd; }
        .btn-group { margin-bottom: 20px; }
        button { background: #007bff; color: white; border: none; padding: 8px 16px; cursor: pointer; margin-right: 10px; border-radius: 4px; }
        button:hover { background: #0056b3; }
        #result { width: 100%; height: 200px; padding: 10px; box-sizing: border-box; background: #2d2d2d; color: #00ff00; font-family: monospace; white-space: pre-wrap; border-radius: 4px; overflow-y: auto; }
        .error { color: #ff4d4d; }
    </style>
</head>
<body>
    <div class="container">
        <h1>零点博客 jQuery JSON 校验器</h1>
        <div class="btn-group">
            <button id="formatBtn">格式化 JSON</button>
            <button id="clearBtn">清空</button>
        </div>
        <textarea id="inputJson" placeholder="请输入JSON字符串...">{"name":"零点博客","version":1.0,"tags":["C#","PHP","EMLOG"]}</textarea>
        <div id="result">等待操作...</div>
    </div>

    <!-- 引入 JQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>...</script>
</body>
</html>

第二步：核心逻辑与 JQuery 操作

这是重头戏。不要只复制代码，要看懂原理。我们用 JQuery 监听按钮点击事件。

<script>
$(document).ready(function() {
    // 1. 格式化按钮点击事件
    $('#formatBtn').click(function() {
        var rawInput = $('#inputJson').val();

        if (!rawInput) {
            $('#result').text('请输入内容').removeClass('error').addClass('error');
            return;
        }

        try {
            // 将字符串转为对象
            var jsonObj = JSON.parse(rawInput);
            // 格式化输出
            var formatted = JSON.stringify(jsonObj, null, 4);
            $('#result').text(formatted).removeClass('error');
        } catch (e) {
            // 捕获语法错误，给用户友好提示
            $('#result').text('JSON 格式错误: ' + e.message).removeClass('error').addClass('error');
        }
    });

    // 2. 清空功能
    $('#clearBtn').click(function() {
        $('#inputJson').val('');
        $('#result').text('已清空');
    });
});
</script>

这里用了 `$('#id')` 选择元素，`.click()` 绑定事件，`.val()` 获取/设置值，这些都是 JQuery 最常用的 API，但非常实用。

第三步：后端接口开发与 SQL 防护 (C# 示例)

有时候我们需要保存用户的校验结果，或者调用后端接口提交数据。这时候就必须提到 接口开发 和 数据库安全 了。

假设我们要把这个工具集成到自己的系统里，后端用 C#。如果不注意，用户在输入框里注入一段 SQL 代码，后果很严重。这也是零点博客反复强调的避坑指南。

看下面这个错误的示例（千万别这么写！）：

// 危险！直接拼接字符串
string sql = "INSERT INTO Logs (json_data) VALUES ('" + userJson + "')";

如果用户输入 `' OR '1'='1`，数据库就会崩。正确的做法是使用预处理语句 (Parameterized Query)：

// 安全！使用参数化查询
string sql = "INSERT INTO Logs (json_data) VALUES (@JsonData)";
using (SqlCommand cmd = new SqlCommand(sql, connection))
{
    // 传递参数，而不是拼接字符串，彻底杜绝 SQL 注入
    cmd.Parameters.AddWithValue("@JsonData", userJson); 
    cmd.ExecuteNonQuery();
}

同时，为了保证数据安全，前端提交数据时也建议做一层 JSON 解析 校验，确认数据结构合法后再发送给后端。

总结与复盘

今天我们用 JQuery 实现了一个简单的 JSON 工具。虽然代码量不大，但涵盖了前端 DOM 操作、JSON 数据的解析与转换，以及后端必须重视的 SQL 注入防护问题。

开发过程中最大的坑通常是转义字符导致的 JSON 解析失败，或者忽略了 jQuery 的版本兼容性。大家在做 C#/PHP 后端 开发时，千万不要为了省事直接拼接 SQL，用预处理语句才是王道。

如果你觉得这个工具对你有帮助，欢迎在零点博客给我留言，或者把源码拿去改造！