CODEWITHSUNDEEP
javascriptjquerynode.jsexpress
bexo
bexo

Reputation: 39

Update content of page from a POST request in Express

I had a problem where I tried to update the contents of the web page through a POST request that was done through a form but the problem is that the variables were set to the global scope and every time that I refreshed the page the content was still there. Somebody explained what was the issue and told me that I could "...make the post return a JSON object with the data instead of doing a redirect. Then do the POST async from the client and display the data." Here is the code that I'm using on:

Express:

var data;
var url;

/* GET home page. */
router.get('/', (req, res, next) => {
    res.render('index', { 'data': data});
});

/* POST HANDLER */
router.post('/link', function(req, res, next) {
    var pattern = /^((http|https|):\/\/)/;
    url = req.body.link;

    if (!pattern.test(url))
    {
        url = "http://" + url;
        bitly.shorten(url)
        .then(response => {
            data = response.data.url;

            res.redirect("/");
        });
    }
});

And I'm using jQuery for the POST request:

$('#shortLink').on('click', () => {
    $.ajax({
        type: 'POST',
        url: '/link',
        data: {link: $('#linkInput').val()},
        success: data => {
            console.log(data);
        }
    });
});

What I want to do is get the value of an input, send it to the POST handler on Express and then pass that information back to the home page without having to get out of the page; like a common Ajax request. Can somebody elaborate on what I was suggested to do, above? Or give me another solution.

Upvotes: 1

Views: 2541

Answers (1)

Jared Kantrowitz
Jared Kantrowitz

Reputation: 51

There's no rule that says you have to redirect after handling a post request. Just send the data back via res.json({'url': response.data.url}), and then in your $.ajax success handler it will be available via data.url.

Upvotes: 1

Related Questions