CODEWITHSUNDEEP
javascriptphpajaxxmlhttprequest
Ashish Kumar Sahoo
Ashish Kumar Sahoo

Reputation: 95

How to use the response PHP variables in a XHR call?

I have two pages say, page1.php and page2.php. In page1.php I have a button, when clicked it makes XHR call to page2.php and shows the response in a defined divison i.e. "print" in page1.

Code for page1.php

<html>
    <button type="button" onclick="randomFunction()">Request data</button>
    <div id="print"></div>
    <script type="text/javascript">
        function randomFunction()
        {
        var xmlhttp;
        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=function()
        {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
          {
          document.getElementById("print").innerHTML=xmlhttp.responseText;
          }
        }
        xmlhttp.open("POST","page2.php",true);
        xmlhttp.send();
        }
    </script>
</html>

Code for page2.php

<?php
$a = "apple";
$b = "banana";
echo $a;
echo $b;
?>

Output I am getting now, https://i.sstatic.net/WDdaa.jpg

I want to manipulate with the response I'm getting from page2. As in I want to show "apple" in red and "banana" in blue on page1.php

How do I do that?

Upvotes: 2

Views: 9709

Answers (1)

Rene Korss
Rene Korss

Reputation: 5494

Send back JSON from page2.php and then add your custom HTML with that data to page1.php.

page1.php

<html>
    <button type="button" onclick="randomFunction()">Request data</button>
    <div id="print"></div>
    <script type="text/javascript">
        function randomFunction()
        {
          var xmlhttp;
          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=function()
          {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
              var data = JSON.parse(xmlhttp.responseText);
              var html = '<span class="apple">'+data.a+'</span><span class="banana">'+data.b+'</span>';

              document.getElementById("print").innerHTML = html;
            }
          }

          xmlhttp.open("POST","page2.php",true);
          xmlhttp.send();
        }
    </script>
</html>

page2.php

<?php
  $a = "apple";
  $b = "banana";

  echo json_encode( array( 'a' => $a, 'b' => $b ) );
?>

Now you could style these spans like you want. Of course you can edit the HTML structure to your desire.

Only PHP

page1.php

<html>
    <a href="?showData=1">Request data</a>
    <div id="print">
        <?php
        // Show data only, if our link was clicked
        if( $_GET['showData'] == 1 ){
            // Get page2.php
            require_once('page2.php');

            echo '<span class="apple">'.$a.'</span><span class="banana">'.$b.'</span>';
        }
        ?>
    </div>
</html>

page2.php

<?php
  $a = "apple";
  $b = "banana";
?>

Upvotes: 2

Related Questions