0

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

2
  • Are you asking how to do an ajax request? Commented Jul 8, 2014 at 10:15
  • I'm asking how to do this I want an easy detailed how-to :) Commented Jul 8, 2014 at 10:52

1 Answer 1

2

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>
Sign up to request clarification or add additional context in comments.

2 Comments

Who said jQuery was available?
Holy! You're right... I'll add the jQuery-less version in a minute.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.