Как обрабатывать ajax после ответа отправленного с экспресс-сервера?

Question

Я новичок, поэтому я не знаю, был ли я ясен с моим вопросом.Моя проблема в том, что ответ, который я отправляю с моего экспресс-сервера, отображается на странице, но я не могу обработать его на стороне клиента с помощью jquery.

На стороне сервера:

router.post("/", [
    //check inputs using expres-validator
    ],
    (req, res)=>{
        //handle validation results
        var errors = validationResult(req);
         if (!errors.isEmpty()) {
            //filter errors
            res.status(400).send([usernameErr, emailErr, passwordErr]);
        }else {
            res.sendStatus(200);
        };
});

client-side:

$(".form-div form input[type='submit']").submit(function(e){
        e.preventDefault();
        if($(this).parent().parent().attr("id") == "signup-form-container"){
            $.post('/signup', $('#signup-form-container form').serialize())
            .done(data=>{
                alert(data)
                console.log(data);
            })
            .fail((err, textStatus)=>{
                alert(err)
                console.log(err)
            });

        };
    });

Я экспортирую свой файл регистрации, маршрут которого указан выше, в мой основной файл.

app.use("/signup", require(`${__dirname}/routes/signup.js`));

Answer 1

Итак, если вы проверите свой селектор:

$(".form-div form input[type='submit']") // this is selecting the input element

Однако событие submit срабатывает только тогда, когда оно находится внутри элемента формы, поэтому прикрепление события submit к кнопкам или входам не будет работать.

Вот ссылка: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event

Итак, чтобы решить проблему, попробуйте это:

/*
 Here you are selecting the form, so submitting here will work. 
*/
$(".form-div form").submit(function(e){
        e.preventDefault();
        if($(this).parent().parent().attr("id") == "signup-form-container"){
            $.post('/signup', $('#signup-form-container form').serialize())
            .done(data=>{
                alert(data)
                console.log(data);
            })
            .fail((err, textStatus)=>{
                alert(err)
                console.log(err)
            });

        };
    });

Вот почему щелчок работал, потому что он срабатывает, когда вы щелкаете элемент. Я надеюсь это имеет смысл.