大家好，我是零点博客的博主。昨天在折腾项目时，遇到了一个需要实时展示爬虫抓取数据的难题。在零点博客的开发历程中，我们经常需要在EMLOG或其他 CMS 的基础上做二次开发。这次，我决定用 C# 来处理后端逻辑，用 jQuery 来处理前端交互，实现一个既美观又安全的动态数据看板。今天就把复盘过程中的干货分享给大家。

1. 后端：C# 抓取与 SQL 防护

首先，我们需要从外部获取数据。这里我写了一个简单的 C# 爬虫逻辑，将数据存入 MySQL 数据库。

这里有一个非常关键点：SQL 注入防护。很多初学者喜欢直接拼接字符串，但这是大忌。我们必须使用参数化查询（预处理语句）。比如我们有一个搜索接口，查询关键词是用户输入的：

string sql = "SELECT * FROM crawl_data WHERE title LIKE @keyword";
using (SqlCommand cmd = new SqlCommand(sql, conn))
{
    // 使用 SqlParameter 而不是直接拼接字符串，彻底杜绝注入风险
    cmd.Parameters.AddWithValue("@keyword", "%" + userInput + "%");
    // 执行查询...
}

2. 接口开发：JSON 数据的流转

为了方便前端调用，我们写了一个 Web API 接口，直接返回 JSON 格式的数据。这样，前端就不需要再去解析 XML 或者复杂的流，处理起来非常快。

3. 前端：jQuery 的 DOM 操作与实战

前端方面，我们依旧沿用经典的 HTML/CSS/JS 组合。为了简化复杂的原生 JS 异步操作，我引入了 JQuery。它的选择器非常强大，能轻松帮我们选中对应的表格行。

下面是具体的操作步骤：

1. HTML 结构： 构建一个空的表格容器，用于后续填充数据。

<table id="dataTable">
    <thead><tr><th>标题</th><th>状态</th><th>操作</th></tr></thead>
    <tbody></tbody>
</table>

2. CSS 样式： 简单的边框和背景色，保证在线工具的易用性。

#dataTable { width: 100%; border-collapse: collapse; }
#dataTable th, #dataTable td { border: 1px solid #ddd; padding: 8px; }

3. JQuery 逻辑： 页面加载后，发起 Ajax 请求获取 JSON 数据，然后遍历渲染。

$(document).ready(function() {
    // 模拟发起请求
    $.ajax({
        url: '/api/getData',
        type: 'GET',
        dataType: 'json', // 期望返回 JSON
        success: function(data) {
            var $tbody = $('#dataTable tbody');
            $tbody.empty(); // 清空旧数据

            data.forEach(function(item) {
                var row = "<tr>" +
                    "<td>" + item.title + "</td>" +
                    "<td>" + item.status + "</td>" +
                    "</tr>";
                $tbody.append(row); // jQuery 动态追加行
            });
        }
    });
});

4. 避坑指南与总结

在这次零点博客的更新中，我踩了两个坑：

• 编码问题： 如果不设置 UTF-8，爬虫抓回来的中文和数据库查询出来的中文可能会乱码，记得在连接字符串里加上 Server Encoding。
• 跨域问题： 如果你直接用 file:// 打开 HTML 文件，jQuery 的请求会报错，必须通过本地服务器访问，或者后端配置 CORS。

这套基于 C# jQuery 的方案非常适合快速搭建后台管理工具，既有后端的安全防护，又有前端的高效交互。希望这篇来自零点博客的实操笔记能帮到大家，源码已在仓库更新，欢迎查阅。