我是Web开发的初学者，直到今天，我才开始使用jquery进行Curd操作，而且我不知道服务器端技术，我只是前端开发人员
我在Google中搜索了很多内容，该内容如何使用Jquery和 在每个Ajax教程中，他们都实现了包括php标签..etc在内的代码，而我在下面的一个教程中实现了以下代码，但添加和编辑功能无法正常工作。
https://codepen.io/rama-krishna-the-selector/pen/bZRRyB
<!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">
<!-- <link href="assets/custom.css" rel="stylesheet"> -->
<title>Karvy InnoTech</title>
<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(0)">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">×</a>
<h4 id="ModalTitle"></h4>
</div>
<div class="modal-body">
<form id="form">
<fieldset id="SubmitForm">
@Html.HiddenFor(m => m.StudentId, new { @id = "StuId" })
<div class="form-group">
@Html.TextBoxFor(m => m.StudentName, new { @id = "StuName", @class = "form-control",
@placeholder = "Name*" })
</div>
<div class="form-group">
@Html.TextBoxFor(m => m.Email, new { @id = "Email", @class = "form-control",
@placeholder = "Email*" })
</div>
<div class="form-group">
@Html.DropDownListFor(m => m.Dept, ViewBag.ListOfDepartment as SelectList,
"--Select Dept--", new { @id = "DropDwn", @class = "form-control" })
</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>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 () {
var 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"
}
]
$("#LoadingStatus").html("Loading....");
var SetData = $("#SetStudentList");
for (var i = 0; i < StudentList.length; i++) {
var 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 + ")' ><span class='glyphicon glyphicon-edit'></span></a>" + "</td>" +
"<td>" + "<a href='#' class='btn btn-danger' onclick='DeleteStudentRecord(" + StudentList[i].StudentId + ")'><span class='glyphicon glyphicon-trash'></span></a>" + "</td>" +
"</tr>";
SetData.append(Data);
$("#LoadingStatus").html("");
}
//Show The Popup Modal For Add New Student
function AddNewStudent(StudentId) {
$("#form")[0].reset();
$("#StuId").val(0);
$("#DropDwn option:selected").text("--Select Dept--");
$("#ModalTitle").html("Add New Student");
$("#MyModal").modal();
}
//Show The Popup Modal For Edit Student Record
function EditStudentRecord(StudentId) {
var url = "/Home/GetStudentById?StudentId=" + StudentId;
$("#ModalTitle").html("Update Student Record");
$("#MyModal").modal();
}
});
</script>
</body>
</html>