CODEWITHSUNDEEP
phpjavascripthtml
user472402
user472402

Reputation: 313

How to capture the output of a php from javascript

I have written few php files which sit in a server. The output of the php would be as follows:

172.xx.xx.xx/myphpfile.php?arg="abc"

Output

{
status: "ok",
result: "asdsdf"
}

My requirement is to call this php api (172.xx.xx.xx/myphpfile.php?arg="abc") from my javascript, parse the output and draw a chart in the page. To summarize the following are my doubts.

  1. How to call a remote php file from javascript?
  2. How to capture the output of a php file in a javascript?

Upvotes: 0

Views: 1040

Answers (7)

Hungry Mind
Hungry Mind

Reputation: 113

You have to move AJAX technology

<html>
<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("172.xx.xx.xx/myphpfile.php?arg=abc",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}
</script>
</head>
<body>

<div id="myDiv"><h2>Get from PHP</h2></div>
<button type="button" onclick="myFunction()">Load</button>

</body>
</html>

Upvotes: -1

Siddiqui
Siddiqui

Reputation: 7840

Here is the code which I use

<script type="text/javascript">

    //Global Variables  
    var xmlHttpFP;

    if (window.ActiveXObject)
    {   
        xmlHttpFP = new ActiveXObject("Microsoft.XMLHTTP");     
    }//End if
    else
    {
        xmlHttpFP = new XMLHttpRequest();
    }//End else

    //Function To fetch Data From Server
    function LoadFPSummary()
    {   

        xmlHttpFP.open("GET","172.xx.xx.xx/myphpfile.php?arg='abc'");

        xmlHttpFP.send();
        document.getElementById("response").innerHTML = xmlHttpFP.responseText;
    }

    xmlHttpFP.send(null);
</script>

Upvotes: 1

Imad Moqaddem
Imad Moqaddem

Reputation: 1483

You have to use Ajax. Avoid the classic method, prefer using a framework like jQuery or ExtJS, it will be easier and cross-browser.

http://api.jquery.com/jQuery.ajax/

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Ajax

Upvotes: 1

Johnatan
Johnatan

Reputation: 1268

AJAX is the tool you need. Read more here.

Upvotes: 0

Dutchie432
Dutchie432

Reputation: 29170

Both can easily be done with javascript (and even easier with jQuery). If your resulting page is in JSON format (which it appears to be), you can simply do..

$.getJSON('172.xx.xx.xx/myphpfile.php', 'arg=abc', function(obj){
    alert(obj.status);
});

More info: http://api.jquery.com/jQuery.getJSON/

If the API file is not on your server

If the API is not on the same domain as your page with the JS, you will need to create your own PHP page to read the remote file, and dump its contents locally to the domain.

getJson.php

die(file_get_contents('172.xx.xx.xx/myphpfile.php?arg='.$_REQUEST['arg']));

JS

$.getJSON('gtJson.php', 'arg=abc', function(obj){
    alert(obj.status);
});

Upvotes: 1

Jonas Stensved
Jonas Stensved

Reputation: 15326

First of all, javascript is client-side and php is server-side. The web servers outputs text to your browser and it doesn't know about server techniques used.

For fetching and manipulating the data, have a look at jQuery and jQuery ajax

Upvotes: 1

Quentin
Quentin

Reputation: 944526

Remote PHP? Due to the same origin policy you have to write the PHP so it emits JSONP. (That link also explains how to use it from JS).

Alternatively, and with more limited browser support, use CORS with XHR

Upvotes: 1

Related Questions