Jquery ajax return current page html in response

Question

First, let me say that I've looked through other similar questions on this site and the jQuery documentation. So far, I haven't found something that fixes my issue.

I am trying to get HTML data from ajax request but every time in response i got current page html.

Here is my Ajax function.

jQuery.ajax({
    url:"url to function call",
    type: "POST",
    datatype : "html",
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    data: { 
        qtext: filter_search
    },
    success:function(data) {
        console.log(data);
        jQuery("#appendHtml").html(data);
    },
    error : function(data) {}
});

and here is my Joomla PHP function where I have return HTML

public function getHtmlAjax()
{
    $token = $this->createToken();
    $listData = $this->getKapsulelist($token);

    $html = $this->buildLayout($listData);
    echo $html;
    jexit();
}

Answer 1

I had this issue because I was using:

 echo admin_url(); to get the ajaxurl, 

after changing to

echo admin_url('admin-ajax.php');

it worked!