正文

掌握jQuery，轻松实现.net数据库交互实战攻略

/0 浏览量
0322

引言

随着Web技术的发展，前端和后端交互变得越来越重要。jQuery作为前端JavaScript库，可以极大地简化DOM操作和事件处理。而.NET作为后端开发框架，提供了强大的数据库交互能力。本文将结合jQuery和.NET，详细介绍如何轻松实现数据库交互实战。

准备工作

1. 开发环境搭建

  • 前端：安装jQuery库，可以从其官网下载最新版本的jQuery库。
  • 后端：安装.NET开发环境，如Visual Studio或.NET Core CLI。

2. 数据库准备

  • 选择合适的数据库，如MySQL、SQL Server等。
  • 创建数据库表，并插入一些测试数据。

实战步骤

1. 前端页面设计

创建一个简单的HTML页面，包含以下元素：

  • 一个用于显示数据的表格。
  • 一个表单，用于提交数据。
  • 一个按钮，用于发送请求。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery与.NET数据库交互</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td {
            padding: 5px;
        }
    </style>
</head>
<body>
    <table id="data-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <!-- 数据将从后端动态加载 -->
        </tbody>
    </table>
    <form id="data-form">
        <input type="text" id="name" placeholder="姓名">
        <input type="number" id="age" placeholder="年龄">
        <button type="button" id="submit-btn">提交</button>
    </form>

    <script src="app.js"></script>
</body>
</html>

2. 后端.NET代码实现

创建一个ASP.NET Core Web API项目，并添加以下代码：

using Microsoft.AspNetCore.Mvc;
using System.Data.SqlClient;

namespace DatabaseInteraction
{
    [ApiController]
    [Route("[controller]")]
    public class ValuesController : ControllerBase
    {
        private readonly string _connectionString = "your_connection_string_here";

        [HttpGet]
        public IActionResult Get()
        {
            var sql = "SELECT * FROM YourTable";
            using (var connection = new SqlConnection(_connectionString))
            {
                connection.Open();
                using (var command = new SqlCommand(sql, connection))
                {
                    using (var reader = command.ExecuteReader())
                    {
                        var data = new List<dynamic>();
                        while (reader.Read())
                        {
                            data.Add(new
                            {
                                Id = reader.GetInt32(0),
                                Name = reader.GetString(1),
                                Age = reader.GetInt32(2)
                            });
                        }
                        return Ok(data);
                    }
                }
            }
        }

        [HttpPost]
        public IActionResult Post([FromBody] dynamic data)
        {
            var sql = "INSERT INTO YourTable (Name, Age) VALUES (@Name, @Age)";
            using (var connection = new SqlConnection(_connectionString))
            {
                connection.Open();
                using (var command = new SqlCommand(sql, connection))
                {
                    command.Parameters.AddWithValue("@Name", data.Name);
                    command.Parameters.AddWithValue("@Age", data.Age);
                    command.ExecuteNonQuery();
                }
            }
            return Ok();
        }
    }
}

3. 前端jQuery代码实现

在HTML页面中引入jQuery库，并添加以下JavaScript代码：

$(document).ready(function () {
    // 获取数据
    $("#submit-btn").click(function () {
        $.ajax({
            url: "/values",
            type: "GET",
            success: function (data) {
                var html = "";
                data.forEach(function (item) {
                    html += "<tr><td>" + item.Id + "</td><td>" + item.Name + "</td><td>" + item.Age + "</td></tr>";
                });
                $("#data-table tbody").html(html);
            },
            error: function (xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    });

    // 提交数据
    $("#submit-btn").click(function () {
        var name = $("#name").val();
        var age = $("#age").val();
        $.ajax({
            url: "/values",
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify({ Name: name, Age: age }),
            success: function (data) {
                alert("数据提交成功！");
            },
            error: function (xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    });
});

总结

通过本文的介绍，相信你已经掌握了使用jQuery和.NET实现数据库交互的实战方法。在实际开发中，你可以根据需求调整和优化代码，以满足不同的业务场景。希望本文对你有所帮助！

-- 展开阅读全文 --