PDA

View Full Version : Form submit POST request JSON data



ipavlic
1 Feb 2012, 1:35 AM
How can I POST JSON data when submitting a form; or alternatively, how can I POST JSON data from a form (without calling submit)?

When form like


var basicInfo = new Ext.form.FormPanel({
... api: {
...
submit: profile.updateBasicInfo }
});

is submitted with

basicInfo.getForm().submit();

The POST request header has a application/x-www-form-urlencoded content-type and the request body is urlencoded.

I would like it to be a JSON request (having an application/json content type in the header and jsonData in the request body). The reason that I would like a JSON request is that the parameters are currently not deserialized correctly by Spring.

For illustration, let's say I have a MyValueObject and a MyOtherValueObject


MyValueObject {
private String parameterOne;
private List<MyOtherValueObject> myList;
... //getters, setters
}

MyOtherValueObject{
private String otherParameter;
//getters, setters
}

The list of MyOtherValueObjects is not properly deserialized when it is urlencoded with Ext.Object.toQueryString(myList). JSON encoding just the list is also not being properly deserialized.

Ant1105
1 Feb 2012, 6:25 AM
If you take a look at the docs for Ext.form.Basic, you can actually submit a form using an ajax config. For example:



basicInfo.getForm().submit({
url: '/service/YourSpringService',
method: 'POST',
params: {
additionalParam1: 'test'
},
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
}
});


You could also assign a handler to a Save button in the form too and just do a standard ajax post.



this.saveBtn.on('click', this.onSubmitForm, this);

...

onSubmitForm: function() {
Ext.Ajax.request({
method: 'POST',
url: '/service/YourSpringService',
params: {
// your params go here
},
success: function() {
...
}
});

...
}

ipavlic
2 Feb 2012, 2:26 AM
I guess that answers my question. Thanks!