如何使用局部视图显示ajax错误？

Question

我写了一个非常基本的NodeJS应用程序，允许用户登录。现在我是NodeJS的新手所以我试图了解如何使用登录PartialView中的view显示ajax错误。

首先，我有一个名为view的signup.ejs：

<div class="row">
    <div class="col-lg-5 d-none d-lg-block bg-register-image"></div>
    <div class="col-lg-7">
    <div class="p-5">
        <div class="text-center">
        <h1 class="h4 text-gray-900 mb-4">Signup!</h1>
        </div>
        <div id="errors">
            <% include ../partial/messages %>
        </div>
        <form class="user">
        <div class="form-group">
            <input
                type="username"
                id="username"
                name="username"
                class="form-control form-control-user" 
                placeholder="Username" />
        </div>
        <div class="form-group row">
            <div class="col-sm-6 mb-3 mb-sm-0">
                <input
                type="password"
                id="password"
                name="password"
                class="form-control form-control-user" 
                placeholder="Password" />
            </div>
        </div>
        <button id="register" class="btn btn-primary btn-user btn-block">
            Register Account
        </button>
        </form>        
    </div>
    </div>
</div>

<script src="/js/app/user/login.js"></script>

你可以看到我在PartialView声明之前加载了messages form，在这个view的底部我已经包含了处理ajax请求的login脚本：

$("#register").click(function (event) {
    event.preventDefault();

    let regData = 
    {
        'username': $("#username").val(), 
        'email': $('#email').val(), 
        'password': $("#password").val()
    };

    $.ajax({
        type: 'POST',
        contentType : "application/json",
        url: '/user/signup',
        data: JSON.stringify(regData),
        dataType : 'json',
        success: function (data) {
            alert('hello');
            console.log(data);
        }, 
        error: function(jqXHR, textStatus, errorThrown){
            //How to display in partial here?
        }
    });
});

ajax请求会将用户数据发送到user/signup路由：

const userController = require('../controllers/user.controller.js');
router.post('/signup', userController.save);

该路线调用save的函数userController：

exports.save = function (req, res) {
    let user = new User();
    user.username = req.body.username;
    user.email = req.body.email;
    user.password = req.body.password;
    user.passwordConfirm = req.body.passwordConfirm;

    //Validate
    let errors = validate(user);

    //All was fine
    if (!errors) {
        //todo
    }
    else {
        res.status(500).send({errors: errors});
    }
};

这个函数只是在将数据插入validate之前MongoDB数据，如果验证失败，那么我返回验证方法生成的错误，它只包含一个对象数组，例如：

[
   { msg: 'Password mismatch' },
   { msg: 'Username length less than 6' }
]

现在我希望使用名为PartialView的messages在表单顶部显示消息：

<% if(typeof errors != 'undefined'){ %> <% errors.forEach(function(error) { %>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <%= error.msg %>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<% }); %> 

我怎么能用ajax做到这一点？

可能解决方案

我修好了这个：

res.render('partial/messages', { errors: errors, layout: false});

这将返回错误结构，然后使用ajax：

 error: function(jqXHR, textStatus, errorThrown){
     $('#errors').append(jqXHR.responseText);
 }

我不知道这是否是一个很好的解决方案，让我们看看你们中是否有人有更好的建议。

Answer 1

ejs是一种模板语言，用于在客户端浏览器上呈现页面之前插入值（变量，其他模板等）。页面加载后发生的任何事件只能使用javascript / jQuery处理。

您选择的异步路由的替代方法是这样的：

将表单更改为：

<form method="POST" action="/user/signup" class="user"> 
... //rest of the form goes here
</form>

然后在你的app.js上：

app.post('/user/signup', function(req, res) {

    //handle user signup here

    const errors = validate(user);

    if (errors) {
    res.render('signup', {errors:errors});
    }
    else {
    res.render('somePageHere', {errors:false});
    }
});

现在您可以通过ejs访问错误消息：

<% if (errors) { %>

    <% errors.forEach(function(error) { %>

        <div class="errors"> <%= error.msg %> </div>

    <% }); %>

<% } %>