jQuery ajax, url property does't work correctly

Question

I use this trivial code, but it doesn't work correctly (for my mind):

$(document).on("click", "#summary_and_tables #tables ul li a", function() {
    var url = "index.php/table/show/"+this.hash;
    console.log(url);
    $.ajax({
        type: "POST",
        url: url,
        dataType: 'json',
        success: function(response) {
            if(response.status == 'ok') {}
        }
    });
});

Output in console is:

index.php/table/show/#summary

But ajax request sent to:

http://test.loc/st_base/index.php/table/show/

Answer 1

Unfortunately/luckily, nothing is wrong. Things work as expected. Browsers just do not send hash to the server. If you really need to pass it, put it into data:

var url = "index.php/table/show/";
var hashOnly = this.hash;
$.ajax({
    type: "POST",
    data: {myhash: hashOnly},
    url: url,
    dataType: 'json',
    success: function(response)
    {
        if(response.status == 'ok')
        {
        }
    }
});

Answer 2

You are using relative url, this will append index.php/table/show/"+this.hash to current location of your script.

It appears that your script is located at " http://test.loc/st_base/ "

Try specifying full url, starting with " http://mycorrectsite.com/blah/index.php/table/show ..."