I am Siva, a passionate java developer, open source enthusiast, blogger. I like to cover Java, Struts, Spring, Hibernate, Ajax Tutorials, How-To's and Best Practices. Sivaprasadreddy is a DZone MVB and is not an employee of DZone and has posted 34 posts at DZone. You can read more from them at their website. View Full User Profile

How to POST and GET JSON between EXTJS and SpringMVC3

06.29.2011
| 33800 views |
  • submit to reddit

After one month of evaluation of frameworks and tools, I choose ExtJS for UI and Spring/SpringMVC for the business layer for my pet project.

By using ExtJS we can send data to server by form submits or as request parameters, or in JSON format through Ajax requests. ExtJS uses JSON format in many situations to hold data. So I thought using JSON as data exchange format between EXTJS and Spring would be consistent.


The following code snippets explain how we can use ExtJS and SpringMVC3 to exchange data in JSON format.

1. Register MappingJacksonHttpMessageConverter in dispatcher-servlet.xml
  

 <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">        
 <property name="messageConverters">
       <list>
          <bean class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter"/>
       </list>
  </property>        
</bean>
   
Add jackson-json jar(s) to WEB-INF/lib
    
2. Trigger the POST request from ExtJS script as follows:
   
  
Ext.Ajax.request({
  url : 'doSomething.htm',
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },                        
  params : { "test" : "testParam" },
  jsonData: {
                   "username" : "admin",
                    "emailId" : "admin@sivalabs.com"
                 },
  success: function (response) {
                      var jsonResp = Ext.util.JSON.decode(response.responseText);
                      Ext.Msg.alert("Info","UserName from Server : "+jsonResp.username);
              },
  failure: function (response) {
                  var jsonResp = Ext.util.JSON.decode(response.responseText);
                  Ext.Msg.alert("Error",jsonResp.error);
            }
});
    
3. Write a Spring Controller to handle the "/doSomething.htm" reguest.

@Controller
public class DataController
{
    @RequestMapping(value = "/doSomething", method = RequestMethod.POST)
    @ResponseBody
    public User handle(@RequestBody User user) throws IOException
    {
        System.out.println("Username From Client : "+user.getUsername());
        System.out.println("EmailId from Client : "+user.getEmailId());
        user.setUsername("SivaPrasadReddy");
        user.setEmailId("siva@sivalabs.com");        
        return user;
    }
}

Any other better approaches?

From http://sivalabs.blogspot.com/2011/06/how-to-post-and-get-json-between-extjs.html
Published at DZone with permission of Sivaprasadreddy Katamreddy, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

David Jimenez replied on Wed, 2011/06/29 - 1:43am

Hi Sivaprasadreddy,

did you evaluated dojo or jquery?

Why did you choose ExtJS ?

Sivaprasadreddy... replied on Wed, 2011/06/29 - 2:12am in response to: David Jimenez

Hi,

I took the following criteria for choosing Javascript library:

1. DOM Manipulation: In this all frameworks ExtJS, JQuery, Dojo, YUI are providing very good utilities to do DOM manipulation.

2. Communicating to Server : In this regard also all the frameworks are more or less equal.

3. Widget Library: In this area ExtJS is better than rest of all.

    YUI is also good in Widget support. But look and feel is poor.

    Dojo doesn't have a Grid with Pagination support(may be new version might have this).

    We need to add Jquery plugins to get this Pagination Grid support. It might be easy but it would be great if we have this in-built with the framework.

4. Look and Feel: In this also ExtJS are far better than others.

YUI's pagination bar , Collapsible Layouts doesn't look good (to me :-))

For ExtJS the main strong points are its Widget Library, look n feel and Server Communication.

Thanks,

Siva

Mike And replied on Fri, 2011/07/01 - 8:11am

look for this js "framework" - angularjs.org.

Brent Farrell replied on Fri, 2011/07/01 - 2:17pm

Did you consider direct web remoting http://directwebremoting.org/dwr/index.html. It has nice spring integration.

ilyas turkben replied on Mon, 2011/07/04 - 8:08am

Hello, Did you try to use a filter that decode EXT JS's json and set proper request parameters so that Spring MVC could handle request as regular ? I'm using EXT JS on a big project with PHP and EXT JS works very vell on complex situations so keep it :)

George Jiang replied on Tue, 2011/07/05 - 12:19am in response to: Sivaprasadreddy Katamreddy

Hi

 How about Alloy UI?

Sivaprasadreddy... replied on Sat, 2011/07/09 - 11:27pm in response to: ilyas turkben

Hi,

Having a filter to decode json as request parameters and making SpringMVC handle it as normal requests is a good idea. I will try this.

Thanks,

Siva 

Sirikant Noori replied on Sun, 2012/01/15 - 12:09pm

I m facing issue with passing a nested java object to extjs. I have form panel that loads the fields, i m able to load name kind of field, but not able to load address.city kind of fields into extjs. Could you tell me how to do it.

Kookee Gacho replied on Tue, 2012/05/29 - 12:42am

Then, at least for mature products, there's also a pretty large number of low-priority bugs that are real but of limited impact, so they didn't hold up the last release.-Arthur van der Vant

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.