How to use the "Answer" of an XMLHTTPREQUEST in Cakephp (2.5)

Question

CONCLUSION: I put it up here to get a quick look, I was using onClick to get this function, but I was leaving the request(request) out of function so it wasn’t working.

I have an action in the Posts controller:

                 public function pega($id = null)
                 {                      

                 $posts = $this->Post->findById($id);

                  foreach($posts as $pok)
                  {
                            $foda = $pok['love'];
                  } 

                  $this->set('foda', $foda);

                  $this->set('_serialize', array('foda'));

                }

In my layout I try to make a request to take the data of the function "take" and put inside an html tag:

<script>
var xmlhttp = new XMLHttpRequest();
var url = "http://localhost:81/cakephp/posts/pega/<?php echo $post['Post']['id'];?  >.json";

xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 

var out = JSON.parse(xmlhttp.responseText);
 function loap (){ 
 var arr = out[0];
document.getElementById("id01").innerHTML = arr;
}

}

}
xmlhttp.open("GET", url, true);
xmlhttp.send();

Added:

This should only occur when a button is clicked:

 <button type="button" onClick="loap()"> Checa </button>

The script became so:

<script>

var x = new XMLHttpRequest();
var url = "http://localhost:81/cakephp/posts/pega/
                  <?php echo $post['Post']['id'];?  >.json";

//Eu tenho que criar a variável url porque preciso passar um id através do link...    

x.open("GET", url, true);
x.send();

var response = null;

x.onreadystatechange = function() {
if (x.readyState == 4 && x.status == 200) {
   response = JSON.parse(x.responseText); 

}

function loap(){
       document.getElementById("id01").innerHTML = response[0];    
}

</script>

Answer 1

Let me give you a little example of how I used to use

Controller of Cakephp

class JsonController extends AppController
{


    public function teste()
    {
        $this->autoRender = false;

        $json = json_encode(array('nome' => 'StackOverflow'));

        $this->response->type('application/json');
        $this->response->body($json); // json retornado {"nome" : "StackOverflow"}          
    }


}

Javascript:

var x = new XMLHttpRequest
x.open('GET', 'json/teste', true)
x.send();

var response = null;

x.onreadystatechange = function() {
if (x.readyState == 4) {
   response = JSON.parse(x.responseText)
}

}

Updating

Based on your code, I can imagine you want the following:

 public function pega($id = null)
 {                      

    $posts = $this->Post->findById($id);

    $this->response->type('application/json');

    return $this->response->body(json_encode($posts));

}

In HTML

    var x = new XMLHttpRequest
    x.open('GET', 'json/teste', true)
    x.send();

    var response = null;

   var divQuerQueroImprimirOsValores = document.getElementById('ondeVouImprimir')

    x.onreadystatechange = function() {
    if (x.readyState == 4) {
       response = JSON.parse(x.responseText)

       for (key in response) {

           divQuerQueroImprimirOsValores.innerHTML += response[key]    

       }
    }