My server is using ServiceStack and would like to receive some data like this:
{
Customer: {
Company: \"TheCompany\",
RegionCode: \"AU_NS
ServiceStack can POST complex types using the JSV Format, e.g:
<input name="Customer" value="{Company:TheCompany,RegionCode:AU_NSW}" />
<input name="Name" value="{First:Jimi,Last:Hendrix}" />
Otherwise you can send complex types using JSON, e.g. with jQuery's $.ajax:
$.ajax({
type: 'POST',
contentType: 'application/json; charset=utf-8',
url: "http://host/myservice",
dataType: 'json',
data: JSON.stringify({Customer:{Company:'x',RegionCode:'x'}}),
success: function(response){ ... }
});
Although for maximum interoperability you should strive to keep your Request DTO's flat, e.g:
<form id="theForm" ...>
<input name="Company" value="TheCompany" />
<input name="RegionCode" value="AU_NSW" />
<input name="FirstName" value="Jimi" />
<input name="LastName" value="Hendrix" />
</form>
Which you can then POST as-is which the browser will do using the x-www-form-urlencoded
Content-Type, or even ajaxify using ServiceStack's ss-utils.js bindForm method, e.g:
$("#theForm").bindForm();
Attach a submit handler to the form which places the JSON as the value of a pre-created hidden input field within the form.
$(form_to_submit).on('submit', function() {
$(form_to_submit).find(hidden_input).val(json_value);
});
To submit a form using jQuery you use:
$(form_to_submit).submit();
While Mythz suggestion of posting JSV values would work, it can sometimes be cumbersome to build and maintain complex JSV in JavaScript. For example, you may have to deal with escaping user inputted data, and syntax issues can be hard to track
This solution looks complex but it's really not, and is highly re-usable and only requires that you can send encoded JSON, which from jQuery is very easy.
JSON.stringify(data)
Data
fieldData
field into your DTOMy solution sends the DTO object encoded as JSON in a form post to the service. Then a simple filter intercepts the request and populates the DTO from the JSON payload.
public class GetFromJsonVariableAttribute : Attribute, IHasRequestFilter
{
string _variableName;
public GetFromJsonVariableAttribute(string variableName = "Data")
{
_variableName = variableName;
}
public void RequestFilter(IRequest req, IResponse res, object requestDto)
{
// Convert the JSON payload to DTO format
var payload = req.GetParam(_variableName);
if(payload != null)
requestDto = JsonSerializer.DeserializeFromString(payload, requestDto.GetType());
}
public int Priority { get { return int.MinValue; } }
IHasRequestFilter IHasRequestFilter.Copy() { return this; }
}
Then to use you simply add the attribute to your DTO. Data
is the name of the form variable that will hold the JSON payload. You can choose any name you want here.
[GetFromJsonVariable("Data")]
[Route("/Customers","POST")]
public class CreateCustomerRequest : IReturnVoid
{
public Customer Customer { get; set; }
public Name Name { get; set; }
}
$("#CreateCustomer").on("submit", function(){
// Get the form values into simple key value array
var values = {};
$.each($(this).serializeArray(), function(){ values[this.name] = this.value; });
// Prepare the DTO
var data = {
Customer: {
Company: values["Company"],
RegionCode: values["RegionCode"]
},
Name: {
First: values["First"],
Last: values["Last"]
}
};
// Convert it to JSON
$('#PayloadForm [name="Data"]').val(JSON.stringify(data));
$('#PayloadForm').submit();
return false;
});
With the HTML create the form your user will interact with, with no action, but is linked to the jQuery submit event code; And a hidden form that will actually perform the synchronous POST. Note the attribute Data
matches that of the attribute the payload should be received on
<form id="CreateCustomer">
<input type="text" name="Company" value="TheCompany" /><br/>
<input type="text" name="RegionCode" value="AU_NSW" /><br/>
<input type="text" name="First" value="Jimi" /><br/>
<input type="text" name="Last" value="Hendrix" /><br/>
<input type="submit" value="Submit" />
</form>
<!-- This form is hidden -->
<form action="/Customers" method="POST" id="PayloadForm">
<input type="hidden" name="Data" value="">
</form>
I ran into the same thing here where I was using NodeJS and an Express Server. I wanted to post a complex JSON object that I had built as the user made selections client side. I then attached an onClick event to a button that called my SubmitForm function.
Your data can be any JSON object. Just be sure to parse it server side.
function Param(name, value){
var hiddenField = document.createElement('input');
hiddenField.setAttribute('type', 'hidden');
hiddenField.setAttribute('name', name);
hiddenField.setAttribute('value', value);
return hiddenField;
}
function SubmitForm(data){
var form = document.createElement('form');
form.setAttribute('method', 'post');
form.setAttribute('action', '/route');
form.appendChild(Param('data', JSON.stringify(data)));
document.body.appendChild(form);
form.submit();
}
Additionally, this is pure javascript. No hidden HTML or jQuery here for those of you who prefer to remove the overhead.