script.js：62未捕获的TypeError：无法读取未定义的属性'_id'
我得到_id的未定义属性，我正在尝试在下面的UI上做一个put方法，这是我的前端js和html
<html>
<head>
<meta charset="utf-8">
<meta name content="width=device-width">
<link href="style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<head>
<body>
<title>Student Attendance</title>
<header>
<h1>Students</h1>
</header>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Additional Student</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="newForm">
<div class="form-group row">
<label for="_id" class="col-sm-2 col-form-label">ID</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="int" autocomplete="on">
</div>
</div>
<div class="form-group row">
<label for="role_num" class="col-sm-2 col-form-label">role number</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="role_num" autocomplete="on">
</div>
</div>
<div class="form-group row">
<label for="first_name" class="col-sm-2 col-form-label">first name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="first_name" autocomplete="on">
</div>
</div>
<div class="form-group row">
<label for="last_name" class="col-sm-2 col-form-label">last name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="last_name" autocomplete="on">
</div>
</div>
<div class="form-group row">
<label for="marks" class="col-sm-2 col-form-label">marks</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="marks" autocomplete="on">
</div>
</div>
<button id="newStudent" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Add Student</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">End</button>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="editStudentModal2" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel2">Update Student</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="updateForm">
<div class="form-group row">
<label for="id" class="col-sm-2 col-form-label">ID</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="student_id">
</div>
</div>
<div class="form-group row">
<label for="role_num" class="col-sm-2 col-form-label">Role Number</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="role_num">
</div>
</div>
<div class="form-group row">
<label for="first_name" class="col-sm-2 col-form-label">First Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="first_name">
</div>
</div>
<div class="form-group row">
<label for="last_name" class="col-sm-2 col-form-label">Last Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="last_name">
</div>
</div>
<div class="form-group row">
<label for="marks" class="col-sm-2 col-form-label">Marks</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Marks">
</div>
</div>
<button type="button" class="btn btn-secondary" data-dismiss="modal">End</button>
<button id="studentUpdate" type="button" class="btn btn-primary" data-toggle="modal" data-target=#exampleModal2>Update Student</button>
</form>
</div>
</div>
</div>
</div>
<button id="newStudent" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Add Student</button>
<table class="table table-bordered table-hover" width="100%">
<thead style="background:#ddd;" class="thead-dark">
<tr>
<th>ID</th>
<th>Role Number</th>
<th>First Name</th>
<th>Last Name</th>
<th>Marks</th>
<th>Option</th>
</tr>
</thead>
<tbody id="students">
</tbody>
</table>
<script src="./script.js"></script>
</body>
</html>
$(document).ready(function() {
showStudents('students');
$("#newStudent").click(function(a) {
a.preventDefault();
let data = {
_id: $($("#newForm")[0].int).val(),
role_num: $($("#newForm")[0].role_num).val(),
first_name: $($("#newForm")[0].first_name).val(),
last_name: $($("#newForm")[0].last_name).val(),
marks: $($("#newForm")[0].marks).val(),
}
$("#newForm").trigger("reset");
$("#newForm").toggle();
$.ajax({
method: "POST",
url: "http://localhost:3200/students/addStudent",
dataType: "json",
data: data,
}).always(function(data) {
console.log('always', data);
showStudents();
});
});
$('#studentUpdate').click(function(a) {
a.preventDefault();
let update = {
_id: $($("#updateForm")[0].int).val(),
role_num: $($("#updateForm")[0].role_num).val(),
first_name: $($("#updateForm")[0].first_name).val(),
last_name: $($("#updateForm")[0].last_name).val(),
marks: $($("#updateForm")[0].marks).val(),
}
$("#updateForm").trigger("reset");
$("#updateForm").toggle();
$.ajax({
url: "http://localhost:3200/students/updateStudent",
method: 'PUT',
dataType: 'json',
data: update,
}).always(function(data) {
console.log(data);
showStudents();
});
});
$("body").on('click', '.edit-student', function(a) {
a.preventDefault();
$('#exampleModal2').modal('show'); //open modal
var student_id = $(this).data('studentid');
//populate newForm
$.ajax({
method: "GET",
url: "http://localhost:3200/students/" + student_id,
dataType: "json",
success: function(response) {
const student = response[0];
$('#student_id').val(student._id);
$('#role_num').val(student.role_num);
$('#first_name').val(student.first_name);
$('#last_name').val(student.last_name);
$('#Marks').val(student.marks);
}
});
});
$("body").on('click', '.deleteStudent', function(a) {
a.preventDefault();
var student_id = $(this).data('studentid');
console.log(a);
$.ajax({
url: "http://localhost:3200/students/deleteStudent",
method: 'POST',
data: {
_id: student_id
},
dataType: 'json',
}).always(function(data) {
console.log(data);
showStudents();
confirm("You want to delete this");
});
});
});
function showStudents() {
$.ajax({
method: "GET",
url: "http://localhost:3200/students",
dataType: "json",
success: function(response) {
$('#students').empty();
$.each(response, function(i, student) {
const text = "<tr>" +
"<td>" + student._id + "</td>" +
"<td>" + student.role_num + "</td>" +
"<td>" + student.first_name + "</td>" +
"<td>" + student.last_name + "</td>" +
"<td>" + student.marks + "</td>" +
"<td>" + "<button button type=\"button\" class=\"btn btn-danger deleteStudent\" data-studentid=" + student._id + ">Delete</button>" + "</td>" +
"<td><button type='button' class='btn btn-danger edit-student' data-toggle='modal' data-target1='#exampleModal2' data-studentid=" + student._id + ">Edit</button></td>";
$("#students").append(text);
});
}
});
}
问题出在我的edit-student函数上，但是我需要知道student._id是如何定义的。还要让我知道我犯了错误的人