Thursday, June 23, 2011

How to POST and GET JSON between EXTJS and SpringMVC3

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

Again 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 will be consistent.

The following code snippets explains 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>

Don't forget to copy 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?

10 comments:

  1. Using ExtJS, Spring and DWR. Have you tried that?

    For DWR you need a specific tree loader, and a DwrProxy. In ExtJS 4 the proxy can be quite simple, and also the tree loader uses it.

    ReplyDelete
  2. How to POST and GET JSON between EXTJS 4 and .Net Webservice???? Can you Help me????

    Thanks.....

    ReplyDelete
  3. 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.

    Thank you.

    ReplyDelete
  4. could you please share the changes to be done in the web.xml also.

    ReplyDelete
  5. how to send extjs form data and some extra parameters in json (but form data is not in json)to spring controller

    ReplyDelete
  6. i created a working client side (extjs) example. i left out the server side jax-rs stuff for tomorrow. http://marklybarger.blogspot.com/2014/06/extjs-post-form-json-to-jax-rs.html

    ReplyDelete
    Replies
    1. Hi, how can have access to your site?
      Require an invite.

      Delete
    2. Hi, tried accessing your blog. It requires an invite..could you help?

      Delete
  7. I am new to Maven + Jetty + Spring + Extjs. I am having running project of extjs. Now I want to write one jason file. For that I want ExtJs ajax call + java.

    I think your example can help me out. But I don't know how to do it?

    1) Copy and pasted the jackson-json jar(s)
    2) Wrote your code at my extjs file
    3) Where to write servlet? What is the procedure to write the srevlet? Means in which folder? Does we have to add this in any .xml file?

    Kind Regards,

    ReplyDelete