Как мне написать фронтенд "Аякс"

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 - это низкоуровневый API для выполнения вызовов AJAX из браузера, который встроен в большинство современных браузеров.

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

Подробнее о fetch можно узнать из MDN: 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 действительно вступает в свои права, когда вы выполняете более сложные запросы. Он поддерживает пакет UMD через unpkg - просто перетащите <script src="https://unpkg.com/axios/dist/axios.min.js"></script> на свою HTML-страницу, и вы получите глобальный доступ к axios в объекте окна.