如何在我的节点服务器上正确运行 ajax？答案

【问题标题】：How can I properly run ajax on my node server?如何在我的节点服务器上正确运行 ajax？
【发布时间】：2019-07-12 01:09:26
【问题描述】：

我想在将新产品上传到数据库的表单上调用 ajax 函数。即使我在 script.js 中禁用了事件的默认行为，由于 router.post() 方法，页面仍然会刷新。

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

我的 script.js（前端）：

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

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

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

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

});

【问题讨论】：

我认为是因为你在节点中渲染了view。你可能只需要res.send({"your json"}) 或res.json("your json")
旁注 - 这看起来不对：$('newproduct-form')
“即使我在 script.js 中禁用了事件的默认行为，由于 router.post() 方法，页面仍然会刷新。” 不，那是不是为什么。响应无法到达并更改页面对其的处理方式。如果页面正在刷新，那是因为没有阻止表单提交。逐步检查客户端代码以了解原因。
如果我做 res.send({'my jason'}) 页面会输出一个 json 文件，它不会更新同一个页面。
唯一改变前端（和后端）表单的代码行是我发布的那些。所以我相信即使我试图阻止客户端刷新，服务器端仍然会推送刷新吗？

标签： javascript node.js ajax express

【解决方案1】：

编辑：我认为如果您使用 .on("click", ...) 而不是 .submit(...) 它可以解决您的问题

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

您正在使用relative path，就像您一直在您的节点应用程序上一样，但您不是因为前端应用程序是在客户端执行的。

您必须调用服务器节点的整个 url，例如：

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

在我的示例中，您的服务器在端口8080 上的localhost 上运行

【讨论】：

感谢您的回复。我试过了，页面仍然会自行重新加载。

【解决方案2】：

如果您在前端使用 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});
}

【讨论】：