Node.js form update with and without ajax

Question

What would be the "best" approach to dealing with forms which have to work without and with JavaScript enabled?

Would it be better to create different routes for each, like

AJAX request : route "API/contact" and return res.send("message")

without JavaScript: route "contact"and return a redirect with a query param of "message"

Or in one route and detect xhr and render it depending on this?

Or is there a better way of dealing with the problem of taking the user to the res.send("") when the JavaScript isn't enabled to give the user feedback on the submit?

To clarify: I have a site which is working with AJAX requests for its forms to avoid full page loads. It lacks the fallback when JavaScript is not enabled and thus when a user clicks submit on a form, he receives the data from the post back with res.send and it replaces the whole page, instead of the desired effect which would be to just update a label with the "success/fail" message. The question then remains as above which would be the neat way of dealing with this?

Answer 1

Probably the best thing to do would be to check the X-Requested-With header and check that it contains XMLHttpRequest (but this might get deprecated as the new fetch API will slowly come into browser.

Based on that value, you might want to return a JSON payload, or eventually trigger a server side rendering, therefore returning an HTML page ready-to-be-consumed.

As an alternative, you can return a redirect response with a particular query string value; once the page is loaded, you will check for that value (using qs for example, or deparam in jquery and manipulate the client side accordingly.

Answer 2

Your server routes have nothing to do with client-side javascript. You don't need javascript to receive a "res.send" message.