Я использую node, express, MongoDB и handlebars для рендеринга страницы.
Проблема в том, что когда get-request попадает на сервер, он рендерит страницу, а затем запрашивает второй раз. Как избежать двойного запроса.
На странице нет сценариев для перезагрузки. все выборки управляются событиями (как при клике и т. д.)
это код:
const client = new MongoClient(url, {
useNewUrlParser: true,
useUnifiedTopology: true
});
router.get("/", (req, res) => {
console.log('--------------------')
console.log(req.originalUrl)
client.connect(err => {
console.log("Connected successfully to database");
const db = client.db(dbName);
const students = db.collection("students");
students
.find()
.sort({ insertTime: -1 })
.toArray((err, result) => {
console.log("Found records");
res.render("students", { students: result });
return client.close();
})
});
});
Это страница (сделанная с помощью руля):
<form method="POST" action="/addStudent">
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="First name" name='name'>
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name" name='last'">
</div>
<div class=" col">
<input type="submit" class="btn btn-primary" value="add studnet">
</div>
</div>
</form>
<div class='average'>
<button class='btn btn-primary' onclick='getAverage(event)'>Get Average</button>
</div>
<ul class="list-group">
{{#each students}}
<li class="list-group-item"><button class="btn btn-danger" id={{this._id}}
onclick='deleteStudent(event)'>Delete</button> {{this.name}} {{this.last}} has average of <input type='number'
max=100 min=0 value={{this.average}} onchange='updateAverage(event, "{{this._id}}")' /> </li>
{{/each}}
</ul>
Это функции:
function addStudent(e) {
console.log('addStudent')
e.preventDefault();
const formObj = e.target.elements;
const student = {
name: formObj.name.value,
last: formObj.last.value
};
console.log(student);
if (student.name && student.last) {
fetch("/addStudent", {
method: "POST",
body: JSON.stringify(student),
headers: {
Accept: "application/json",
"Content-Type": "application/json"
}
})
.then(res => {
console.dir(res);
res.json().then(resJson => {
console.dir(resJson);
});
})
.catch(err => {
console.error(err);
});
} else {
alert("Name an family is requierd");
}
}
function deleteStudent(e) {
console.log('deleteStudent')
let studentObj = { studentId: e.target.id };
fetch("/deleteStudent", {
method: "DELETE",
body: JSON.stringify(studentObj),
headers: {
Accept: "application/json",
"Content-Type": "application/json"
}
}).then(res => {
console.dir(res);
location.reload();
});
}
function updateAverage(e, studentId) {
console.log('updateAverage')
const grade = { grade: e.target.valueAsNumber, studentId };
fetch("/updateAverage", {
method: "PUT",
body: JSON.stringify(grade),
headers: {
Accept: "application/json",
"Content-Type": "application/json"
}
}).then(res => {
console.dir(res);
});
}
function getAverage(e) {
console.log('getAverage')
fetch("/getAverage", {
method: "POST",
body: JSON.stringify({}),
headers: {
Accept: "application/json",
"Content-Type": "application/json"
}
})
.then(res => {
console.dir(res);
res.json().then(resJson => {
console.dir(resJson);
});
})
.catch(err => {
console.error(err);
});
}