What is the difference between ajax post request and form post request?

Question

on server side, for example, I use flask to handle these post requests, the same code can handle the two type requests, but on client side, ajax request will not let the browser to refresh the whole page, but the form does. So what is the difference in deep, is some header field not same?? or something else?? Thanks!

Answer 1

There is no difference, only that AJAX is, as the acronym suggests, asynchronous, which means it does not block anything else from running. Both the form and an AJAX request send a POST request the only difference is that the browser uses the response from the forms POST request to load the new page where as the AJAX requests response is passed to a callback in JavaScript.

Answer 2

Submitting an HTML form constructs an HTTP request formatted according to the rules defined for HTML forms and causes the browser to navigate to the response it gets.

Making a request with JavaScript allows the programmer to construct a much wider variety of requests — including adding custom headers, formatting data in different ways (such as JSON), and identically to how an HTML form would construct the request — and causes the response to be processed with JavaScript.

In general, when writing server-side code, you shouldn't need to care if the request came from JavaScript or an HTML form. There are situations where you do, but usually only as an XY Problem.

For example, you might wish to respond to a regular form submission with an HTML document (because the browser is navigating to it) but to an Ajax request with JSON (because you want to process it easily). In this case the JavaScript should set an Accept request header to tell the server that it would prefer a JSON response. Then the server-side code you write should look at that to determine if HTML or JSON is preferred (and not worry why HTML or JSON is preferred).