前端开发者求助：jQuery+Ajax实现CRUD的添加编辑功能失效

安全阿岳

2026-5-12

解决纯前端jQuery实现CRUD（无后端）的问题

嘿，作为前端新手遇到这种情况太正常了——你找的教程大多是前后端结合的，而你只需要纯前端的实现。咱们一步步把你的代码修复好，让添加、编辑、删除功能都跑起来：

核心问题分析

你的代码里混了ASP.NET MVC的后端语法（比如@Html.TextBoxFor这类），浏览器根本识别不了这些标签，直接会当成纯文本显示，这是表单功能失效的主要原因。另外，你只写了打开模态框的逻辑，却没实现保存/更新数据的核心代码，还有一些小问题比如图标不显示、重复引入jQuery。

分步修复方案

1. 移除后端语法，替换为纯HTML表单元素

把所有@Html开头的标签换成普通HTML，毕竟你不需要后端支持：

把@Html.HiddenFor(...)换成 <input type="hidden" id="StuId" value="0">
把@Html.TextBoxFor(...)换成普通的<input class="form-control" placeholder="Name*" id="StuName">
把@Html.DropDownListFor(...)换成手动写的<select>标签，因为没有后端给你传下拉选项

2. 完善CRUD的核心逻辑

你的数据存在前端数组StudentList里，所以所有操作都直接修改这个数组，然后刷新表格：

给保存按钮添加点击事件，区分“添加新学生”和“编辑学生”两种场景
实现编辑时从数组中获取数据填充表单的逻辑
实现删除学生并刷新表格的逻辑

3. 修复图标显示问题

你用的是Bootstrap 4，但代码里写的是Bootstrap 3的glyphicon，换成你已经引入的Font Awesome图标就好了。

4. 清理重复依赖

你的代码里重复引入了两次jQuery，删掉其中一个，避免冲突。

完整修复后的代码

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
    <title>Student CRUD (Pure Frontend)</title>
    <!-- 只保留一个jQuery引入 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="container" style="margin-top:3%">
    <a href="#" class="btn btn-info" onclick="AddNewStudent()">Add New Student</a>
    <br /><br />
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Student ID</th>
                <th>Student Name</th>
                <th>Email</th>
                <th>Department</th>
                <th>Action(Edit)</th>
                <th>Action(Delete)</th>
            </tr>
        </thead>
        <tbody id="SetStudentList">
            <tr id="LoadingStatus" style="color:red"></tr>
        </tbody>
    </table>

    <div class="modal fade" id="MyModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <a href="#" class="close" data-dismiss="modal">&times;</a>
                    <h4 id="ModalTitle"></h4>
                </div>
                <div class="modal-body">
                    <form id="form">
                        <fieldset id="SubmitForm">
                            <!-- 替换后端HiddenFor为普通隐藏输入框 -->
                            <input type="hidden" id="StuId" value="0">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Name*" id="StuName" required>
                            </div>
                            <div class="form-group">
                                <input type="email" class="form-control" placeholder="Email*" id="Email" required>
                            </div>
                            <div class="form-group">
                                <!-- 手动写下拉选项，替代后端的DropDownListFor -->
                                <select id="DropDwn" class="form-control" required>
                                    <option value="">--Select Dept--</option>
                                    <option value="dept">Dept</option>
                                    <option value="business">Business</option>
                                    <option value="mba">MBA</option>
                                    <option value="inter">Inter</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <a href="#" class="btn btn-block btn-danger" id="SaveStudentRecord">Save</a>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
    // 前端存储的学生数据
    let StudentList = [
        { "StudentId": 1, "StudentName": "ram", "Email": "ram@gmail.com", "isDeleted": "yes", "Dept": "dept" },
        { "StudentId": 2, "StudentName": "sam", "Email": "sam@gmail.com", "isDeleted": "no", "Dept": "business" },
        { "StudentId": 3, "StudentName": "ramadevi", "Email": "ramadevi@gmail.com", "isDeleted": "yes", "Dept": "mba" },
        { "StudentId": 4, "StudentName": "pooja", "Email": "pooja@gmail.com", "isDeleted": "no", "Dept": "inter" }
    ];

    // 渲染表格数据
    function renderStudentTable() {
        $("#SetStudentList").empty();
        $("#SetStudentList").append('<tr id="LoadingStatus" style="color:red"></tr>');
        $("#LoadingStatus").html("Loading....");
        
        let SetData = $("#SetStudentList");
        SetData.find("#LoadingStatus").remove(); // 移除加载提示
        
        for (let i = 0; i < StudentList.length; i++) {
            let Data = `<tr class='row_${StudentList[i].StudentId}'>
                <td>${StudentList[i].StudentId}</td>
                <td>${StudentList[i].StudentName}</td>
                <td>${StudentList[i].Email}</td>
                <td>${StudentList[i].Dept}</td>
                <td>
                    <a href='#' class='btn btn-warning' onclick='EditStudentRecord(${StudentList[i].StudentId})' >
                        <i class="fas fa-edit"></i>
                    </a>
                </td>
                <td>
                    <a href='#' class='btn btn-danger' onclick='DeleteStudentRecord(${StudentList[i].StudentId})'>
                        <i class="fas fa-trash"></i>
                    </a>
                </td>
            </tr>`;
            SetData.append(Data);
        }
    }

    // 初始化渲染表格
    renderStudentTable();

    // 打开添加新学生的模态框
    window.AddNewStudent = function() {
        $("#form")[0].reset();
        $("#StuId").val(0);
        $("#DropDwn").val("");
        $("#ModalTitle").html("Add New Student");
        $("#MyModal").modal();
    }

    // 打开编辑学生的模态框并填充数据
    window.EditStudentRecord = function(StudentId) {
        // 从数组中找到对应ID的学生
        let student = StudentList.find(item => item.StudentId === StudentId);
        if (student) {
            $("#StuId").val(student.StudentId);
            $("#StuName").val(student.StudentName);
            $("#Email").val(student.Email);
            $("#DropDwn").val(student.Dept);
            $("#ModalTitle").html("Update Student Record");
            $("#MyModal").modal();
        }
    }

    // 删除学生
    window.DeleteStudentRecord = function(StudentId) {
        if (confirm("Are you sure you want to delete this student?")) {
            // 从数组中移除对应学生
            StudentList = StudentList.filter(item => item.StudentId !== StudentId);
            // 刷新表格
            renderStudentTable();
        }
    }

    // 保存学生数据（添加或编辑）
    $("#SaveStudentRecord").click(function(e) {
        e.preventDefault(); // 阻止默认跳转
        
        let stuId = parseInt($("#StuId").val());
        let stuName = $("#StuName").val().trim();
        let email = $("#Email").val().trim();
        let dept = $("#DropDwn").val();

        // 简单验证
        if (!stuName || !email || !dept) {
            alert("Please fill all required fields!");
            return;
        }

        if (stuId === 0) {
            // 新增学生：生成新的ID（取数组最大ID+1）
            let maxId = StudentList.length > 0 ? Math.max(...StudentList.map(item => item.StudentId)) : 0;
            let newStudent = {
                StudentId: maxId + 1,
                StudentName: stuName,
                Email: email,
                isDeleted: "no",
                Dept: dept
            };
            StudentList.push(newStudent);
        } else {
            // 编辑学生：找到对应项并更新
            let index = StudentList.findIndex(item => item.StudentId === stuId);
            if (index !== -1) {
                StudentList[index] = {
                    ...StudentList[index],
                    StudentName: stuName,
                    Email: email,
                    Dept: dept
                };
            }
        }

        // 关闭模态框，刷新表格
        $("#MyModal").modal('hide');
        renderStudentTable();
    });
});
</script>
</body>
</html>

关键修改说明

所有后端MVC标签都替换成了纯HTML，浏览器可以正常解析
新增了renderStudentTable函数，负责渲染表格数据，每次数据变化后调用它刷新页面
给保存按钮添加了点击事件，区分新增和编辑逻辑，直接修改前端数组
编辑功能会从数组中查找对应学生数据并填充到表单
删除功能通过filter方法移除数组中的对应项，然后刷新表格
替换了图标为Font Awesome的版本，确保正常显示
去掉了重复的jQuery引入，避免潜在冲突

这样你就有了一个完全基于前端的CRUD实现，不需要任何后端代码就能正常运行啦！

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

前端开发者求助：jQuery+Ajax实现CRUD的添加编辑功能失效

核心问题分析 #

分步修复方案 #