Jquery ajax returns current html page in response

Question

First, let me say that I looked at other similar questions on this site and the jQuery documentation. So far I have not found what fixes my problem.

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

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 return the HTML

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

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

Answer 1

I ran into the same problem and solved it by putting it die;at the end of the ajax page .

(On the page that is passed in the ajax function url tag, that is, at the end of the URL of the OR function call, in simple words, the page on the page to which the request is sent).