Languages
[Edit]
EN

JavaScript Ajax POST request with Java Spring MVC controller

1 points
Created by:
Root-ssh
177650

In JavaScript, it is possible to make an AJAX POST request in the following way.

Note: scroll to See also section to see other variants of AJAX requests.

1. Pure JavaScript (Vanilla JS) AJAX POST request

In this section XMLHttpRequest object usage to make a POST request is presented.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
<script>

    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                document.body.innerText = 'Response: ' + xhr.responseText;
            } else {
                document.body.innerText = 'Error: ' + xhr.status;
            }
        }
    };

    var data = 'This is my data';
    
    xhr.open('POST', '/examples/echo', true);
    xhr.send(data);

</script>
</body>
</html>

2. Spring MVC server site POST methods example

In this section simple Spring backend that handles POST method requests is presented.

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class EchoPostController {

    @RequestMapping(value = "/examples/echo", method = RequestMethod.POST)
    @ResponseBody
    public String makePostEcho(@RequestBody String data) {
        return data;
    }
}

See also

  1. JavaScript Ajax GET request with Java Spring MVC controller
  2. JavaScript - how to make ajax request?

References

  1. Ajax (programming) - Wikipedia
  2. XMLHttpRequest.prototype.send method - MDN Docs
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join