Nodejs关于处理ajax请求的困惑

Nodejs关于处理ajax请求的困惑

今天在看一个node的视频课程，其中有一个浏览器发送了ajax type为‘delete’的请求，看到视频教程的源码，很震惊。 直接贴代码：

jquery处理ajax请求代码如下：

$(function () {
    $('.del').click(function (e) {
        var target = $(e.target);
        var id = target.data('id');
        var tr = $('.item-id-'+id);
        $.ajax({
            type: 'DELETE',
            url: "/admin/list?id=" +id
        })
            .done(function (results) {
            if (results.success === 1) {
                if (tr.length > 0) {
                    tr.remove()
                }
            }
        })
    })
})

node处理这个delete请求代码如下

app.delete('/admin/list',function(req,res){
    var id = req.query.id;
    if(id){
        Movie.remove({_id: id},function(err,movie){
            if(err){
                console.log(err)
            }
            else{
                res.json({success:1})
            }
        })
    }
});

上面的代码我测试运行是没有问题的。 问题来了，express API里面我没有找到app.delete()方法，对于ajax的get/post/put/delete请求，node代码是这么写的吗？app.get() app.post(),app.put(),app.delete()这么处理的吗？通常大神们的做法是怎样的？


10 回复

当然可以。你的问题涉及到了如何在Node.js中正确地处理不同类型的HTTP请求，尤其是使用Express框架来处理DELETE请求。首先，我们来解析一下你提到的代码，并探讨一下最佳实践。

代码解析

jQuery处理Ajax请求

$(function () {
    $('.del').click(function (e) {
        var target = $(e.target);
        var id = target.data('id');
        var tr = $('.item-id-' + id);

        $.ajax({
            type: 'DELETE',
            url: "/admin/list?id=" + id
        })
            .done(function (results) {
            if (results.success === 1) {
                if (tr.length > 0) {
                    tr.remove();
                }
            }
        });
    });
});

这段代码监听了带有.del类的元素的点击事件。当用户点击时，它会从元素中提取ID，并通过AJAX发送一个DELETE请求到服务器。如果服务器返回成功响应，它将删除对应的HTML元素。

Node.js Express处理DELETE请求

app.delete('/admin/list', function (req, res) {
    var id = req.query.id;

    if (id) {
        Movie.remove({ _id: id }, function (err, movie) {
            if (err) {
                console.log(err);
            } else {
                res.json({ success: 1 });
            }
        });
    }
});

这里，Express框架通过app.delete()方法定义了一个处理DELETE请求的路由。该路由检查请求参数中的id，并尝试从数据库中删除与该ID关联的文档。

关于app.delete()方法

确实，在Express的官方文档中，你可以找到app.delete()方法。这个方法允许你定义一个路由处理器，专门用于处理DELETE请求。同样，app.get(), app.post(), 和 app.put() 方法也分别用于处理GET、POST和PUT请求。

最佳实践

  • 明确区分请求类型：在处理不同的HTTP方法时，确保你使用正确的HTTP动词（如GET, POST, PUT, DELETE）。
  • RESTful设计：考虑采用RESTful设计原则，使API更加清晰和易于理解。例如，可以使用/admin/list/:id这样的路径来表示删除特定资源。
  • 错误处理：始终包括适当的错误处理逻辑，以确保在发生错误时能够妥善处理。

示例：改进后的代码

// 定义DELETE请求处理程序
app.delete('/admin/list/:id', function (req, res) {
    const id = req.params.id;

    // 假设Movie是一个Mongoose模型
    Movie.findByIdAndRemove(id, function (err) {
        if (err) {
            console.error(err);
            res.status(500).json({ error: "Internal Server Error" });
        } else {
            res.json({ success: 1 });
        }
    });
});

在这个改进版本中，我们使用了req.params.id来获取URL中的ID，这使得路由更加简洁和直观。同时，我们也改进了错误处理部分，以提供更友好的错误信息。


后来搜索看到这么一篇文章，Develop a RESTful API Using Node.js With Express and Mongoose 。贴出来看看，这篇文章这么写是不是过时了？ 现在处理ajax的4种请求get/post/put/delete该用什么方法呢？

源码对于 https://www.npmjs.org/package/methods 这里面的每个方法都提供了支持。文档比较简单所以漏写了而已。

jQuery.ajaxSettings.xhr = window.ActiveXObject !== undefined ? // Support: IE6+ function() {

	return !this.isLocal &&
		/^(get|post|head|put|delete|options)$/i.test( this.type ) &&

	createStandardXHR() || createActiveXHR();

} : // For all other browsers, use the standard XMLHttpRequest object createStandardXHR; head|put|delete 都是post的马甲，这些方法要浏览器支持吧

用post妥妥的

从来都用的get、post，中低高应用全搞定- -

<form action="/" method="post">
    <input type="hidden" name="__method" value="delete" />
	<input type="submit" value="Submit" />
</form>

restFul提倡用delete，不要用post。

为什么 我请求类似 /admin 的页面 会返回 500呢 求教

QQ截图20160710105503.jpg 我也是在慕课网上看的，为什么我点删除时却要刷新后才显示已经删除掉了

你提到的疑惑是有一定道理的。在 Express 中，并没有直接提供 app.delete() 这样的方法来处理 DELETE 请求。不过，你可以使用 app.route() 或者在 app 对象上直接调用 app.delete() 方法来处理 DELETE 请求。下面是详细的解答和示例代码。

解答

示例代码

const express = require('express');
const app = express();
const Movie = require('./models/Movie'); // 假设你已经定义了 Movie 模型

// 使用 app.route() 方法处理 DELETE 请求
app.route('/admin/list')
  .delete((req, res) => {
    const id = req.query.id;
    if (id) {
      Movie.remove({ _id: id }, (err, movie) => {
        if (err) {
          console.error(err);
          res.status(500).json({ success: 0, message: "删除失败" });
        } else {
          res.json({ success: 1 });
        }
      });
    } else {
      res.status(400).json({ success: 0, message: "缺少ID参数" });
    }
  });

// 或者直接使用 app.delete() 方法
// app.delete('/admin/list', (req, res) => {
//   const id = req.query.id;
//   if (id) {
//     Movie.remove({ _id: id }, (err, movie) => {
//       if (err) {
//         console.error(err);
//         res.status(500).json({ success: 0, message: "删除失败" });
//       } else {
//         res.json({ success: 1 });
//       }
//     });
//   } else {
//     res.status(400).json({ success: 0, message: "缺少ID参数" });
//   }
// });

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

解释

  1. app.route() 方法：Express 提供了一个 app.route() 方法，它允许你在同一个路由上定义多个 HTTP 方法的处理器。这种方式更灵活，可以同时处理 GET、POST、PUT 和 DELETE 等多种请求类型。

  2. app.delete() 方法：虽然 Express 文档中没有明确列出 app.delete() 方法，但实际上它是可用的，并且可以直接用于处理 DELETE 请求。这种方式更简单，但灵活性稍差。

最佳实践

  • 如果你的应用需要处理多种 HTTP 方法（如 GET、POST、PUT、DELETE），建议使用 app.route() 方法，因为它更灵活。
  • 如果只需要处理单一类型的 HTTP 方法，可以直接使用 app.get(), app.post(), app.put(), app.delete() 方法。

通过以上方式，你可以更清晰地处理各种 HTTP 请求，并确保代码结构合理、易于维护。

回到顶部