How do I update EJS template + AJAX?

I can't get my head around ejs combined with AJAX. When I read about AJAX , most of the tutorials are using an API which will respond with a json objects.

我无法理解ejs与AJAX的结合。当我阅读有关AJAX的内容时，大多数教程都使用了一个API，它将使用json对象进行响应。

Here's the code

这是代码

router.js

router.get('/jobs', function(req, res) {
    Job.find({}, function(err, jobs) {
        res.render('main/job', {
            jobs: jobs,
            message: req.flash('message')
        });
    });
});

custom.js

$(function() {


  $.ajax({
    type: 'GET',
    url: '/jobs',
    success: function(jobs) {
     // What should I do here?
    }
  });
});

EJS template

EJS模板

<div class="col-md-4">
       <% for(i=0 ; i < jobs.length; i+=3)  { %>

          <div>
            <h4><%= jobs[j].title %></h4>

          </div>
        <% } %>
      </div>

How do I constantly update the ejs using AJAX? because Im quite confused with res.render(); its not a json object

如何使用AJAX不断更新ejs？因为我与res.render（）相当困惑;它不是一个json对象

2 个解决方案

#1

When you call res.render(), you are telling Express to look up a template (in this case, EJS), and "compile" it using some custom data. It then sends the compiled HTML back in the response to the request. In other words, your API does not serve JSON; it serves server-rendered HTML.

当您调用res.render（）时，您告诉Express查找模板（在本例中为EJS），并使用一些自定义数据“编译”它。然后，它会在对请求的响应中发送已编译的HTML。换句话说，您的API不提供JSON;它服务于服务器呈现的HTML。

On the client side, you can just insert this HTML where you want it in the DOM:

在客户端，您只需将此HTML插入DOM中的所需位置即可：

$.get('/jobs', function(html) {
  $('#jobs-container').html(html);
});

An alternative method would be to serve only JSON from the API, and then render all the HTML on the side of your browser. In this model, you can throw out your server-side EJS template:

另一种方法是仅从API提供JSON，然后在浏览器一侧呈现所有HTML。在此模型中，您可以抛弃服务器端EJS模板：

// router.js
router.get('/jobs', function(req, res) {
  Job.find(function(err, jobs) {
    res.send(jobs);
  });
});

On the client:

在客户端：

// custom.js
$.get('/jobs', function(jobs) {
  var $jobs = $('<div class="col-md-4"></div>');
  jobs.forEach(function(job) {
    $jobs.append(`<h1>${job.title}</h1>`);
  });
  $('#jobs-container').html($jobs);
});

There are many considerations to take when choosing to render your HTML on the client vs. server. This article by Karl Seguin is a good starting place on the subject.

选择在客户端与服务器上呈现HTML时，需要考虑许多因素。 Karl Seguin的这篇文章是这个主题的一个很好的起点。

#2

I'm not sure what you're trying to achieve, but res.json is doing what you probably want. The documentation have it all covered.

我不确定你想要实现什么，但res.json正在做你可能想要的。文档全部涵盖在内。

router.get('/jobs', function(req, res) {
    Job.find({}, function(err, jobs) {
        if (req.xhr) { // request was AJAX (XHR)
            res.json({error: err, jobs: jobs});
        } else { // render html template instead
            res.render('main/job', {
                jobs: jobs,
                message: req.flash('message')
            });            
        }
     });
});

#1