Ajax post json xml to SpringMVC 2016-07-25 02:24

We can use json and xml to store complex data in our application. In this post I will show you how to use Ajax post xml and json to springMVC. For quickly starting I use Spring Boot in my example. The code also works in SpringMVC.

Structure of project

├─main
│  ├─java
│  │  └─com
│  │      └─henryxi
│  │          └─post
│  │                  SamplePostController.java
│  │                  User.java
│  │
│  └─resources
│      │  application.properties
│      │
│      └─META-INF
│          └─resources
│              │  jquery.1.12.0.js
│              │
│              └─WEB-INF
│                  └─jsp
│                          post.jsp
│
└─test
    └─java

pom.xml

<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
            <version>8.0.28</version>
        </dependency>
    </dependencies>

User.java

Don't forget getter and setter methods. If you missing them the variable user will be empty.

@XmlRootElement
public class User {

    private String name;

    private String age;

    //getter and setter methods

    @Override
    public String toString() {
        return "User{" +
                "name='" + name + '\'' +
                ", age='" + age + '\'' +
                '}';
    }
}

SamplePostController.java There are two method in controller. postXml will handle the xml and postJson will handle the json.

@Controller
@EnableAutoConfiguration
public class SamplePostController extends SpringBootServletInitializer {

    @RequestMapping("/")
    public String index() {
        return "post";
    }

    @RequestMapping(path = "/post-xml", method = RequestMethod.POST)
    @ResponseBody
    public String postXml(@RequestBody User user) throws IOException {
        return user.toString();
    }

    @RequestMapping(path = "/post-json", method = RequestMethod.POST)
    @ResponseBody
    public String postJson(User user) {
        return user.toString();
    }

    public static void main(String[] args) throws Exception {
        SpringApplication.run(SamplePostController.class, args);
    }
}

post.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>post</title>
</head>
<body>
<script type="application/javascript" src="jquery.1.12.0.js"></script>
<input id="postXmlBtn" type="button" value="post xml">
<br>
<input id="postJsonBtn" type="button" value="post json">
<div id="content"></div>
<script type="application/javascript">
    $('#postXmlBtn').click(function () {
        var xml = '';
        $.ajax({
            url: 'post-xml',
            type: 'POST',
            contentType: "application/xml",
            data: '<user><name>henryxi</name><age>28</age></user>',
            success: function (data) {
                $('#content').html(data);
            },
            error: function (xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                alert(err.Message);
            }
        });
    });
    $('#postJsonBtn').click(function () {
        $.post('post-json', {"name": "henry", "age": 28}, function (data) {
            $('#content').html(data);
        })
    });
</script>
</body>
</html>

application.properties

spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp
server.port=8090

Run the main method of controller and access localhost:8090 you will see two buttons. The one is for posting xml the other one is for posting json. After clicking the button the content of page will change.