Question

我正在研究一个婚姻网站上的项目。在该页面上，我为recently added profile创建了一个新部分。我已经在后端编写了代码，但是在前端我应该写些什么来调用后端代码？

我已经使用过技术，但是没有用。

这是我在控制器中编写的代码：

module.exports.recent = function(req, res) {
    User.find({}).sort('-created').limit(5).exec(function(err, data){
      if (err) 
      {
        return res.status(400).json({
           message: errorHandler.getErrorMessage(err)
         })
      }
      res.json(req.profile,{
        user: req.user || null,
        request: req,
        users: data
      });

    });
};

我在路线中编写的代码

app.route('/recent').get(users.recent);

Answer 1

要广泛回答您的问题“我如何从前端调用后端代码？” -你不知道您向运行代码的路由发出请求，然后发回响应（可能与res.json一起）。无法直接调用代码，因此您需要发出AJAX请求（如您所知）。

您可以使用一些方法。如果使用的是现代浏览器，最简单的是函数fetch。 fetch是用于从浏览器进行AJAX调用的低级API，并且内置于大多数现代浏览器中。

fetch('/recent')
  .then(res => res.json())
  .then(myResult => { /* do what you want with the result here */ })

您可以通过MDN了解更多有关fetch的信息：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

由于fetch级别很低，因此上面写了各种包装程序，以使生活更轻松。我的偏好是axios，您可以在https://github.com/axios/axios上了解更多信息。以下代码与axios等效：

axios.get('/recent')
  .then(res => res.data)
  .then(myResult => { /* do what you want with the result here */ })

axios在执行更复杂的查询时真正发挥作用。它通过unpkg支持UMD软件包-只需将<script src="https://unpkg.com/axios/dist/axios.min.js"></script>放到HTML页面上，您就可以在窗口对象上全局访问axios。

如何编写前端“ ajax”

1 个答案: