Вместо одного запроса отправляется два Ajax, Express

134

01 ноября 2019, 07:30

4.16.4 версия моего Express Первый объект приходит пустым, а второй нормальным. Сервер

app.use('/javascripts',express.static(path.join(__dirname,'node_modules','jquery','dist')));
app.use(express.static(path.join(__dirname,'public')));
app.use(bodyParser.urlencoded({extended:true}));
app.post('/registration',(req,res)=>{
console.log(req.body);
 const login=req.body.login;
 const password=req.body.password;
 const passwordConfirm=req.body.passwordConfirm;
 console.log(login);
 if(login.length==0 || password.length==0 || passwordConfirm.length==0){
    res.json({
        ok:false,
        error:'Все поля должны быть заполнены!',
        fields:['login','password','passwordConfirmd']
    }) }else if (login.length<3 || login.length>16){
        res.json({
            ok:false,
            error:'Длина логина от 3 до 16 символов!',
            fields:['login']
        });}
        else if(password!==passwordConfirm){
            res.json({
                ok:false,
                error:'Пароли не совпадают',
                fields:['password','passwordConfirm']
            })
        }
         else {
            var v=String(login);
            db.query("SELECT count(title) FROM posts WHERE title=$1;",[v]).then(function(ress){
                if(ress.rows[0].count==0){
                        bcrypt.hash(password,null,null,function(err,hash){
                db.query("INSERT INTO posts (id,title, body) VALUES (nextval('serial'),$1,$2 );", [login,hash]);
            }) 
                } else {
                    res.json({
                ok:false,
                error:'Логин занят',
                fields:['login']
            });
                }
                                })

         }
    });

Ниже код страницы

 $(function(){
    $('.register-button').click(function(){
        var data={
            login:$('#register-login').val(),
            password:$('#register-password').val(),
            passwordConfirm:$('#register-password-confirm').val()
        };
        console.log(data);
        $.ajax({
            type:'POST',
            data:JSON.stringify(data),
            contentType:'application/json',
            url:'/registration'
        }).done(function(data){
            if(!data.ok){
                $('.register h2').after(data.error)
            }
        })
    });

    })

Answer 1

Начиная с версии 4.16 в express добавлен встроенный middleware для обработки json запросов: express.json([options])

Нужно просто добавить данный middleware по аналогии с уже используемыми, например:

app.use(express.json());

Проблема двойного запроса заключается в том, что первый это ajax запрос, для которого не было добавлено парсера тела поэтому результат приходил пустой, а второй - это прямая отправка формы, для которой парсер тела был добавлен app.use(bodyParser.urlencoded({extended:true}));.

Для решения достаточно запретить форме делать submit, например добавив в обработчике onsubmit вызов e.preventDefault()

Answer 2

Добавлю к комментариям: Обработчик на сервере выглядит вот так:

app.post('/registration', (req,res) => {
// вот это и есть та точка, куда приходит ваш запрос.
});

Но, по скольку у вас post запрос, вам необходимо его распарсить через bodyParse.
А чтобы понимать как это работает, учите по книгам.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Редактирование таблицы React

Возникла следующая ситуация, мне необходимо выполнить операцию редактирования полей в таблицеДелаю я это следующим образом:

134

javascript

Как взять текст из элимента <div> и при этом не получить лишние теги?

Как при нажатии Enter не получить лишние теги? Как у соцсети В контакте если не введено не чего то поле ввода остается пустым сообщение не добавляется!!!...

123

javascript