Send post data from Phonegap (Cordova) to server

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.