Ajax GET request does not show parameters in the URL

Question

I'm trying to do GET request onclick using jQuery AJAX function, but the problem is that I dont see the parameters in the URL:

Here is the code:

<a href="#" class="md-list-content" data-invoice-id=<?php echo $invoiceId; ?>  onclick="myFunction('<?php  echo $invoiceId;  ?>')">

Here the Javascript code:

function myFunction(id) {
var invoice_detailsid = id;
//alert(id);
 $.ajax({
    url:"invoice_details", //the page containing php script
    type: "GET", //request type
    data: ({invoice_detailsid: invoice_detailsid}),
    success:function(data){
              console.log("success);
      }
   });
}

After I do submit, I want the URL to look like this:

http://localhost/project/page_invoices/a0yO01t8ZUIAY

I need to do it this was without refreshing the page, and at the same time, I want to see the params when I do GET request.

Please help!

Thanks.

Answer 1

When making a ajax request the url of the current page is not changing. The request it's not related to current page. That's the advantage of ajax request that you stay in current page and you make a request in background.

If you want to change the url of the current page without leaving it (or refresh) you will have to use history library from js. Here you can find more information about history: https://developer.mozilla.org/en-US/docs/Web/API/History_API

Answer 2

data takes in a string and not an object. Try something like this

data: "paramName="+paramValue