为啥我的 jQuery .ajax() 路由的 .done() 方法没有在我的 NodeJS、Express 和 Mongoose 项目中触发？

Posted 2023-03-08

【中文标题】为啥我的 jQuery .ajax() 路由的 .done() 方法没有在我的 NodeJS、Express 和 Mongoose 项目中触发？

【英文标题】：Why is my jQuery .ajax() route's .done() method is not firing in my NodeJS, Express and Mongoose project?为什么我的 jQuery .ajax() 路由的 .done() 方法没有在我的 NodeJS、Express 和 Mongoose 项目中触发？

【发布时间】：2017-03-17 20:37:55

【问题描述】：

试图理解为什么在下面调用了我的销毁路由之后，在客户端 (jQuery) 上我的 .done() 方法没有运行，尽管它是我的 ajax 调用的一部分？

我想要的行为： 我的/:id/destroy 路由应该运行，通过id 销毁报价，然后查询数据库中所有现有的报价。这应该在 jQuery .done() 方法中返回，以附加到现有的 html 数据中（以显示新的引号而无需重新加载页面）。

发生了什么： 当销毁路由运行时，会返回 json 数据，但 .done() 方法永远不会在 jQuery ajax 中运行——另外提交表单（尽管我使用了event.preventDefault();——我也尝试过return false，但是表格仍然发送）。结果页面是一个带有我想要的引号的 GET 响应（因此查询本身正在工作），但我不知道我的 JSON 格式是否不正确，或者我是否错误地处理了来自 jQuery ajax 的回调请求。

有什么想法吗？ （注意，ejs、express、body-parser 和 mongoose 是本项目的依赖）

我有以下 HTML 和 jQuery 来运行对 /destroy URL 的 AJAX 请求，如下所示：

我的路线：

app.get('/:id/destroy', function(req, res)
    // removes quote by id:
    Quote.remove(_id: req.params.id, function(err)
        if (err)
            console.log('Remove was unsuccessful...', err);
            res.json(err);
        ;
        console.log('DELETED');
        // queries for allQuotes:
        Quote.find().sort('vote':'desc').exec(function(err, allQuotes) 
            if (err)
                console.log(err);
             else 
                res.json(allQuotes[0]);
            
        )
    );
);

我的 jQuery：

$('form.destroy').submit(function(event)
    event.preventDefault();
    $.ajax(
        url: '/'+$(this).attr('mongoID')+'/destroy',
        method: 'GET',
        data: $(this).attr('mongoID').serialize(),
    )
    .done(function(allQuotes) // this never runs (Why?)
        console.log('Showing quotes now again after delete...');
        buildAllQuotes(allQuotes); // this never runs but appends response to html data
    )
    .fail(function(err)
        console.log('Error with deletion...', err);
    )
    .always(function()
        console.log('Done');
    )
);

我的 HTML：

<form action="/'+allQuotes[x]._id+'/destroy" class="destroy" method="GET" mongoID="'+allQuotes[x]._id+'">
    <input type="submit" value="Delete">
</form>

【问题讨论】：

我不确定像 mongoID="'+allQuotes[x]._id+'" 这样的自定义属性。

@Mritunjay 是的，你可以这样做，这有点疯狂。你可以设置任何你想要的自定义属性，但是除非它是一个有效的 html5 属性，否则 dom 不会对它做任何事情......否则它会坐在那里，你可以存储数据或相应地操作它，这是一个很好的技巧需要唯一标识符的时候

可以尝试添加 dataType: 'json' (***.com/a/32580987/2069684),

【参考方案1】：

从form 元素中删除action 属性。这将停止提交表单。

HTML

<form class="destroy" method="GET" mongoID="'+allQuotes[x]._id+'">
    <input type="submit" value="Delete">
</form>

由于form 在ajax 调用之后提交，您的done 方法可能不会被触发。

摆弄虚拟action属性，

https://jsfiddle.net/balasuar/atg5m6ym/7631/

【讨论】：

感谢 -- 删除 action 属性后，jquery .submit() 没有触发，所以我可能没有正确设置我的 jQuery 选择器 (form.destroy)...继续退后一步，以新鲜的眼光回来......

@nature mind，它应该在没有 action 属性的情况下工作，但不知道为什么不应该。你能试试这样的假动作吗，action="javascript:void(0);"

这个小提琴正在使用/不使用动作属性，https://jsfiddle.net/balasuar/atg5m6ym/7631/