Send post data from Phonegap (Cordova) to server - codeigniter

Question

I have a form in my Cordova app:
<form id='transport' method='POST' action='' enctype='application/json'>
<input type='hidden' id='data' name='data' value='' />
</form>
and I sent to server (pure js):
postdata = '{';
postdata += '"first_name": "Jon",';
postdata += '"last_name": "Snow"';
postdata += '}';
document.getElementById('data').value = postdata;
document.getElementById('transport').action = 'http://testserver.com/add_user/';
document.getElementById('transport').submit();
but the data variable is empty when received on server.
On server I'm using Codeigniter.
Works perfectly in a web scenario, why not in Cordova? I know there is not the cross-domain problem, and I have allowed all domains (*) in config.xml.
Thanks.

Answer 1

Fixed! Just remove te slash (/) at the end of the URL.
This is because Codeigniter - with this slash - is expecting another parameter (due to its nature url-based) and if there is not, all the variables inside the controller (such as POST data) are null.
So this:
postdata = '{';
postdata += '"first_name": "Jon",';
postdata += '"last_name": "Snow"';
postdata += '}';
document.getElementById('data').value = postdata;
document.getElementById('transport').action = 'http://testserver.com/add_user';
document.getElementById('transport').submit();
it's correct.

Answer 2

You can achieve this with pure JS by using xmlhttp.
This one omits the wrapping of the data variable, so you get first_name and last_name as their own parameters.
function addUser(first_name, last_name){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert("successfully added user");
console.log(xmlhttp.response);//this is the response from the server
}
}
params = "first_name=" + first_name + "&last_name=" + last_name;
xmlhttp.open("POST", "http://testserver.com/add_user",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}
You can also send the data as JSON like this:
function addUser(first_name, last_name){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert("successfully added user");
console.log(xmlhttp.response);//this is the response from the server
}
}
xmlhttp.open("POST", "http://testserver.com/add_user",true);
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
//Not sure if you need the Content-length here or not.
xmlhttp.send(JSON.stringify({"data"=>{"first_name"=>first_name, "last_name" => last_name}}));
}
I find this approach cleaner than using an invisible form when it isn't really needed.