使用 JQuery 和 ExpressJS 和 AJAX 更新 MongoDB答案

【问题标题】：Update MongoDB using JQuery and ExpressJS and AJAX使用 JQuery 和 ExpressJS 和 AJAX 更新 MongoDB
【发布时间】：2018-08-12 14:20:34
【问题描述】：

我有一个使用 type: 'DELETE' 这样的删除函数，我现在正在尝试创建一个 UPDATE 函数，尽管我不知道我是否正确执行此操作，到目前为止的代码如下：

ejs:

<a href="#" class="editEvent" data-id="<%= event._id %>">Edit</a></p>

js:

$(document).ready(function(){
    $('.editEvent').on('click', editEvent);
});

function editEvent(){
    var change = prompt('Change to:', '');

        $.ajax({
            type:'UPDATE',
            url: '/events/update/'+$(this).data('id'),
            data: change
        }).done(function(response){
            window.location.replace('/');
            });
}

app.js：

app.post('/events/update/:id', function(req,res){
    db.events.update({_id: ObjectId(req.params.id)}, {$set: {event_name: data}},function(err, result){
        if(err){
            console.log(err);
        }
        res.redirect('/');
    });
});

所以我想在 MongoDB 中使用 $set 进行更新，并将 event_name 设置为用户在 prompt() 中输入的任何内容。控制台上的错误是：

UPDATE http://localhost:3030/events/update/5a959fdb9effb926a0594d90 400 (Bad Request)

【问题讨论】：

标签： javascript ajax mongodb express post

【解决方案1】：

正如 Kevin 已经指出的，您需要在客户端和服务器端将动作动词从 UPDATE 更改为 PUT。

在服务器端，您需要访问通过 ajax 请求发送的用户输入。如果您安装了bodyparser 中间件，您可以通过req.body 获得。

你也重定向了两次。

//client.js    
$(document).ready(function(){
        $('.editEvent').on('click', editEvent);
    });

    function editEvent(){
        var change = prompt('Change to:', '');

            $.ajax({
                type:'PUT',
                url: '/events/update/'+$(this).data('id'),
                data: {event_name: change}
            }).done(function(response){
                console.log(response);
                window.location.replace('http://localhost:3030/');
            }).fail(function(response){
                console.log("Oops not working");
            });
    }

//app.js
app.put('/events/update/:id', function(req,res){
    const data = req.body; 
    db.events.update({_id: ObjectId(req.params.id)}, {$set: data},function(err, result){
        if(err){
            console.log(err);
        }
        res.send('updated successfully');
    });
});

【讨论】：

成功了！但是，当我查询数据时，它以以下格式提供数据：“event_name”：{“data”：“”}。而不是 "event_name": "data"？
我最初尝试过，但是整个应用程序崩溃并给出：意外：令牌。抱歉，我知道这是一个简单的语法错误，但我真的无法弄清楚，因为我所做的只是删除了括号。意外的 : 是 $set 子句中 event_name 之后的那个
现在只是一个空值，之前，而当它只是 req.body 时，它注册了输入，但只是如上所述嵌套。你认为它可能是什么？
我猜你是在提示输入值？赋予改变的价值是什么？
来自提示的输入。它之前注册了输入并成功更新了 mongo，这只是它插入的格式。但是删除括号似乎没有用，我相信它可能是沿着这些线

【解决方案2】：

请尝试将您的$.ajax({ type:'UPDATE' 更改为$.ajax({ type:'PUT' 并更改 app.post('/events/update/:id', function(req,res) 给app.put('/events/update/:id', function(req,res)

【讨论】：

现在的错误是：jquery-1.12.4.js:10254 PUT localhost:3030/events/update/5a959fdb9effb926a0594d90 404 (Not Found)
请确保你的node js服务器运行在3030端口下。你的react开发服务器运行在3030端口吗？
如果你的 react 开发服务器运行在 3030 上，可能你的 node js 服务器运行在其他端口，例如 8080。找到它并将你的 ajax 调用的 url 更改为它。
我正在执行类似的“删除”类型的 ajax 调用，以使用 id 以这种方式删除列表中的项目。那行得通。所以我怀疑它？