How do I write frontend “ajax”

I am working on a project on a marriage website. On that page I have created a new section for recently added profile. I have written the code in the backend but in the frontend what should I write to call the backend code?

recently added profile

I have used technique but it's not working.

Here is the code that I have written in the Controller:

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,);

);
;


The code that I have written in the route

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


1 Answer
1

To broadly answer your question of 'how do I call the backend code from the frontend?' - you don't. You make a request to the route that runs your code, and then send back (likely with res.json) a response. There is no way to directly call the code, so you'll need to make an AJAX request (as you've identified).

res.json

You can use a couple of things. The easiest, if you're on a modern browser, is a function fetch. fetch is a low-level API for doing AJAX calls from the browser, and comes built-in to most modern browsers.

fetch

fetch

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


You can learn more about fetch from MDN: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

fetch

Because fetch is quite low-level, there are various wrappers written over it to make life easier. My preference is axios, which you can read more about at https://github.com/axios/axios. The following code is the equivalent with axios:

fetch

axios

axios

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


axios really comes into its own when you're performing more complex queries. It supports a UMD bundle via unpkg - just drop <script src="https://unpkg.com/axios/dist/axios.min.js"></script> onto your HTML page, and you'll have access to axios globally on the window object.

axios

unpkg

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.