AJAX response returns current page

I was searching for a similar issue for a while now, but none of the solutions worked for me (and I couldn't find exactly the same issue).

First of all, the website I'm working on is running on Zend Framework. I suspect that it has something to do with the issue.

I want to make a pretty basic AJAX functionality, but for some reason my response always equals the html of the current page. I don't need any of Zend's functionality, the functions I need to implement could (and I'd prefer them to) work separately from the framework.

For testing purposes I made it as simple as I could and yet I fail to find the error. I have a page "test.php" which only has a link that triggers the ajax call. Here's how this call looks:

$('.quiz-link').click(function(e){
    e.preventDefault();
    $.ajax({
        URL: "/quiz_api.php",
        type: "POST",
        cache: false,
        data: {
            'test': 'test'
        },
        success: function(resp){
            console.log(resp);
        },
        error: function(resp){
            console.log("Error: " + reps);
        }
    }); 
});

And this quiz_api.php is just:

<?php
    echo "This is a test";
?>

When I click on the link I get the entire HTML of the current page. "This is a test" can't be found there. I'm also getting an error: "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/."

I reckon it has to do with the JS files that are included into this HTML response, but I've also tried setting "async: true" and it didn't help.

I would like to avoid using Zend Framework functions for this task, because I'm not well familiar with it and even making a simple controller sounds rather painful. Instead I want to find out what's causing such behavior and see if it can be changed.

PS: I've also tried moving quiz_api.php to another domain, but it didn't change anything.

Solution

I know that it might be an older code but it works, simple and very adaptable. Here's what I came up with. Hope it works for you.

//Here is the html
<a href="#" id="test" onclick="test()">Link Test</a>
<div id="test_div"></div>

function test(){
  // Create our XMLHttpRequest object
  var hr = new XMLHttpRequest();
  // This is the php file link
  var url = "quiz_api.php";
  // Attaches the variables to the url ie:var1=1&var2=2 etc...
  var vars = '';
  hr.open("POST", url, true);
  //Set content type header information for sending url encoded variables in the request
  hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  // Access the onreadystatechange event for the XMLHttpRequest object
  hr.onreadystatechange =
  function(){
    if(hr.readyState == 4 && hr.status == 200){
        var return_data = hr.responseText;
            console.log(return_data);
            document.getElementById('test_div').innerHTML = return_data;
    }else{
        document.getElementById('test_div').innerHTML = "XMLHttpRequest failed";
    }
  }
  //Send the data to PHP now... and wait for response to update the login_error div
hr.send(vars); // Actually execute the request
}

you can change the whole page with a document.write instead of changing individual "div"s