Я работаю над веб-приложением, которое позволяет пользователю размещать сообщения на странице.У меня есть два ejs-файла:
index.ejs, в котором есть форма для ввода пользователем информации и вывода целого списка имени пользователя и сообщений из базы данных.
validation.ejs, который помогает мне показывать сообщения об ошибках с помощью aJax (потому что я не хочу, чтобы страница обновлялась при возникновении ошибки, в результате мой список исчезнет), и я использую mongooseдля хранения данных все входные требования настроены в mongoose.
Когда я отправляю пустую форму, я получаю сообщения об ошибках, показывающие («имя не может быть пустым», «сообщение не может быть пустым»).'), но когда я отправляю снова с предоставленной информацией, она все еще показывает ошибку, мой вопрос: есть ли способ использовать условие «если, иначе» в ajax, которое может либо отображать ошибки, либо успешно добавлять пользователя?
server.js:
var express = require("express");
var mongoose = require("mongoose");
var bodyParser = require("body-parser");
const flash = require("express-flash");
const session = require("express-session");
mongoose.connect(
"mongodb://localhost/messageDashboard",
{ useNewUrlParser: true },
);
const CommentSchema = new mongoose.Schema(
{
commenter: {
type: String,
required: [true, "Commenter cannot be empty"],
},
comment: {
type: String,
required: [true, "Comment cannot be empty"],
},
},
{ timestamps: true },
);
const MessageSchema = new mongoose.Schema(
{
name: {
type: String,
required: [true, "Name cannot be empty"],
},
message: {
type: String,
required: [true, "Message cannot be empty"],
},
comments: [CommentSchema],
},
{ timestamps: true },
);
const Message = mongoose.model("Message", MessageSchema);
var app = express();
app.set("views", __dirname + "/views");
app.set("view engine", "ejs");
app.use(bodyParser.urlencoded({ extended: true }));
app.use(flash());
app.use(
session({
secret: "keyboard cat",
resave: false,
saveUninitialized: true,
cookie: { maxAge: 60000 },
}),
);
app.get("/", function(req, res) {
Message.find({}, function(err, messages) {
if (err) {
res.redirect("/");
} else {
console.log(messages);
res.render("index", { messages: messages });
}
});
});
app.post("/postMessage", function(req, res) {
var newMessage = new Message(req.body);
newMessage.save(function(err) {
if (err) {
console.log("there is a error when posting", err.errors);
for (var e in err.errors) {
req.flash("postMsg", err.errors[e].message);
}
res.render("validation", { errors: newMessage.errors });
} else {
console.log("success added a user");
res.redirect("/");
}
});
});
app.listen(8000, function() {
console.log("listening on port 8000");
});
index.ejs:
<body>
<h2>Welcome to Message Board </h2>
<div id='placeholder'>Placeholder</div>
<form action='/postMessage' method='post' class='postForm'>
<h4>Name:</h4>
<input type='text' name='name'>
<h4>Message:</h4>
<input type='text' style="width: 600px; height: 100px;" name='message'><br>
<button id='submitMessage' style='margin-left: 520px; background-color: darkorange;' type='submit'>Post Message</button>
</form>
<script>
$('.postForm').submit(function(e){
e.preventDefault()
$.ajax({
url: '/postMessage',
method: 'POST',
data: $(this).parent().serialize(),
success: function(serverResponse){
console.log('ajax is working')
$('#placeholder').html(serverResponse)
}
})
})
</script>
validation.ejs:
<body>
<% if(messages.postMsg){ %>
<% for(var x of messages.postMsg) {%>
<h5 style='color: crimson'><%= x %></h5>
<% } %>
<% } %>
</body>