post data to PHP page in external server and load content from JavaScript in local computer

Question

I want to post data to a PHP file in a server (www.domaine.com) using a JavaScript located in computer / mobile app

example : test.php

<?php
    $x = $_POST['count'];
    for ($i = 0; $i < $x; $x++)
        echo $x;
?>

data to be post using JavaScript and PSOT method to test.php

example

input
    test.php / post data : count=5
output
    01234

I want JavaScript to get me the output (01234) after posting (count=5) to (test.php) located in external server (www.domaine.com)

I basically develop in C# but as I'm obliged to do a cross-platform mobile app I switched to JavaScript (won't use Xamarin) for C# I was able to do everything using WebBrowser but not anymore in JavaScript, isn't there any object equivalent to WebBrowser in .NET ?

I need it for a mobile app that will load data from GPS Tracking website, API returns data in both XML and JSON

note : I don't have access to the external server

Answer 1

Here I'll give you a pretty good example of how these things are usually managed.
Still, it's up to you and your programming experience to grasp the meaning of it.

html and js example:

<form action="" id="formId" method="post" accept-charset="utf-8">
    <label for="inputNumber">Input something: </label>
    <input type="number" id="inputNumber" name="count"></input>
</form>
<span id="submit">Submit</span>

<script>
var getPhpResponse = function( data ) {
    console.log("manage php response HERE");
}

$("#submit").click(function(){
    $("#formId").submit();
});

$(document).ready(function () {
        $("#formId").bind("submit", function (event)
        {
            $.ajax({
                async: true,
                data: $("#formId").serialize(),
                success: function(data, textStatus) {
                    getPhpResponse( data )
                },
                type:"POST",
                url:"name/and/location/of/php/file.php"
            });
            return false;
        });
});
</script>

file.php example:

<?php
$x = $_POST['count'];
echo '{"response":"';
for ($i = 0; $i < $x; $i++)
{
    echo $i;
}
echo '"}';

Poxriptum:

1. There should be further input validation, one can't trust the type="number" just yet.
2. That the submit button is a span instead of an input is a personal choice that makes difference just for styling purposes.
3. You should read up on AJAX and JSON.
4. Consider using a PHP framework, such as CakePHP ; it may serve you well.
5. This answer assumes you have access to the server. If you don't, then you should be reading the API documentation instead of asking questions on SO without even detailing which API you are talking about.

Edit:

Here is the $less version.

<form action="" id="formId" method="post" accept-charset="utf-8">
    <label for="inputNumber">Input something: </label>
    <input type="number" id="inputNumber" name="count"></input>
</form>
<span id="submit">Submit</span>

<script>
document.getElementById("submit").onclick = function () {
    var url = 'name/and/location/of/php/file.php';
    var userInput = encodeURIComponent(document.getElementById("inputNumber").value);
    var data = "count=" + userInput;
    makeRequest( data, url );
};

var getPhpResponse = function( data ) {
    console.log("manage php response HERE");
    console.log(data);
    parsed = JSON.parse(data);
    console.log(parsed);
}

var xhr = new XMLHttpRequest();

var makeRequest = function( data, url ) {
    xhr.open('POST', url, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    xhr.send(data);
};

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function()
{
    if ( xhr.readyState == 4 )
    {
        if ( xhr.status == 200 || window.location.href.indexOf("http") == -1 )
        {
            getPhpResponse(xhr.responseText);
        }
        else
        {
            console.log("Manage error here");
        }
    }
}

</script>