Как отобразить ошибку AJAX, используя частичное представление? - PullRequest
Новая
       8

Как отобразить ошибку AJAX, используя частичное представление?

1 голос
/ 05 марта 2019

Я написал действительно простое NodeJS приложение, которое позволяет пользователю войти в систему. Теперь я новичок в NodeJS, поэтому я пытаюсь понять, как я могу отобразить ошибку ajax, используя PartialView из логина view.

Во-первых, у меня есть 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 я включил login скрипт, который обрабатывает запрос ajax: 

$("#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 route: 

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);
 }

Я не знаю, является ли это хорошим решением, посмотрим, есть ли у кого-нибудь из вас что-нибудь лучше.

1 Ответ

1 голос
/ 07 марта 2019

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>

    <% }); %>

<% } %>
...