【发布时间】：2021-05-06 17:07:35
【问题描述】：
我正在尝试使用 express、ejs 和 MongoDB 构建一个预约网站。 当请求发送到“/booking”时，会显示包含医生的所有详细信息的书页。对于每个点击书籍按钮的医生，都会动态添加一个表格。一个 js 事件被添加到 book 按钮，以便当用户单击该按钮时，可以使用 ajax 访问该特定的医生 ID 并将其发送回服务器。我的基本想法是当按钮为 'i' 时单击并从 doctprs 数组中获取特定“i”索引处的医生 ID 值。但是 ejs 会在 javascript 之前加载，所以我无法做到这一点。请帮我获取所选医生ID的值。
更新 在 div id="myCalendar" 的表单中，我正在显示一个日历，用户可以从中选择日期。 我想获取用户选择的医生 ID，然后使用 axios 请求将其发送到服务器，然后获取该特定医生在该特定日期的时间段并将其显示在表单中，以便用户可以选择特定时间为该日历安排并在当天预约。
app.js
app.get("/booking",function(req,res){
Doctor.find().populate('doctor_id','name id').populate('hospital_id').then((doctors,err)=>{
res.render("book",{doctor:doctors});
}).catch(err=> req.flash('error',"Something went wrong!Try again!"));
});
app.post("/time_slots",function(req,res){
items=Appointment.find({doctor_id: mongoose.Types.ObjectId(req.body.doctor), appointment_date:new Date(req.body.app_date)}).then((slots,err)=>{
let data=JSON.stringify(slots);
console.log(req.body.doctor+" "+req.body.app_date);
console.log(slots);
return res.json({slots: data})
}).catch(err=> req.flash('error',"Something went wrong!Try again!"))
});
book.ejs
<% for(i=0;i<doctor.length;i++){ %>
<div id="details<%= i %>">
<%= doctor[i].doctor_id['id'] %>
<%= doctor[i].doctor_id['name'] %>
<%= doctor[i].speciality %>
<%= doctor[i].experience %>
<%= doctor[i].hospital_id.name %>
<%= doctor[i].hospital_id.location %>
<button class="btn btn-success booking_btn" id="<%= i %>">Book</button>
<br><br><br>
</div>
<% } %>
<script>
var buttons= document.getElementsByClassName("booking_btn");
for(let i = 0; i <buttons.length; i++) {
buttons[i].addEventListener("click", function() {
var booking_form=` <form action="/booking" method="post" id="book-appointment-form">
<div id="myCalendar" class="vanilla-calendar" value=""></div>
<div id="boxes"></div>
<button type="submit" class="btn btn-success">Confirm</button>
</form>`
document.getElementById("details"+i).insertAdjacentHTML( 'beforeend', booking_form);
createCalendar();
sendSelectedDate(i);
})
}
function createCalendar(){
calendarSet=true;
myCalendar = new VanillaCalendar({
selector: "#myCalendar",
pastDates: false,
availableWeekDays: [
{day: 'monday'},
{day: 'tuesday'},
{day: 'wednesday'},
{day: 'thursday'},
{day: 'friday'}
],
datesFilter: true
});
}
function sendSelectedDate(i){
let date_selected = document.getElementById("myCalendar");
document.getElementsByClassName("vanilla-calendar-body")[0].addEventListener("click", function(e) {
e.preventDefault();
var t=<%= doctor[i].doctor_id['id'] %>
var d =new Date(date_selected.value).toLocaleDateString('ko-KR').slice(0, -1).replaceAll('. ','-');
axios.post('/time_slots', {app_date: d,doctor: t}).then(function (response) {
var $section = $('<div class="col-md-4"></div>');
(JSON.parse(response.data.slots)).forEach(function(slot) {
$section.append(`<button>${slot.time_slot}</button>`);
});
$('#boxes').html($section);
}).catch(function(e) {
console.log(e);
console.log("Please try again later.");
})
})
}
</script>
【问题讨论】：
-
一项更正和一项建议： 更正：您在循环
book-appointment-form中分配id属性。 Id 属性旨在是唯一的。建议：使用事件委托而不是许多、许多重复的事件处理程序。阅读What is DOM event delegation? -
嘿@RandyCasburn 感谢您的回复，我现在发布了完整的代码。
标签： javascript jquery node.js express ejs