Как правильно запустить ajax на моем сервере узлов?

Question

Я хочу вызвать функцию ajax в форме, которая загружает новые продукты в базу данных. Даже если я отключил поведение события по умолчанию в моем script.js, страница все равно обновляется из-за метода router.post ().

my index.js (бэкэнд):

router.post('/dashboard', (req, res) => {

    const{name, pricePerUnit, productDescription, productAmmount} = req.body;
    let errors = [];
    console.log(global.useremail);

    //Check required fields
    if(!name || !pricePerUnit || !productDescription || !productAmmount){
        errors.push({msg : "Enter all fields"});
    }

    if(errors.length > 0){
        res.render('dashboard', {
            name,
            pricePerUnit,
            productDescription,
            productAmmount,
            errors,
        });
    }else{
        //Add record
    }
});

my script.js (внешний интерфейс):

$(document).ready(()=>{

$('#submitNewProduct').submit((e)=>{
    e.preventDefault();

    const data = getFormDataAsJSON($('newproduct-form'));

    $.ajax({
        type: 'post',
        url: '/dashboard',
        data: data,
        dataType: 'json'
    });
});

});

Answer 1

если вы используете ajax на стороне внешнего интерфейса, то ваш сервер должен возвращать ответ в формате JSON.

res.render будет отображать страницу со стороны сервера каждый раз, когда вы отправляете форму.поэтому вы должны использовать res.json ()

if(errors.length > 0){
     res.json({status:"error",errors:errors});
}else{
    //Add record
     res.json({status:"success",record:record});
}

Answer 2

Редактировать: Я думаю, что если вы используете .on("click", ...) вместо .submit(...), это может решить вашу проблему

$('#submitNewProduct').on("click", (e) => {
    e.preventDefault();
    ...

---

Вы используете relative path, как если бы вы всегда были в приложении узла, но это не так, потому что приложение переднего плана выполняется на стороне клиента.

Вы должны вызвать весь url вашего серверного узла, как:

$.ajax({
    type: 'post',
    url: 'http://localhost:8080/dashboard',
    data: data,
    dataType: 'json'
});

В моем примере ваш сервер работает на localhost через порт 8080