How to change url after success in ajax without page reload

Question

This is the ajax

$(".urut").change(function() {    $.ajax({      url: "<?php echo base_url(); ?>categories/brand/<?= $link_brand; ?>?l=<?= $l; ?>&h=<?= $h; ?>&city=<?= $city; ?>&city_name=<?= $city_name; ?>&ket=view",      type: "POST",      data: "urut=" + $(".urut").val(),      success: function(data) {        $("#result").html(data);      }    })  })

This works, but i want the url to change because I have many parameters there and of course with the data: "urut="+$(".urut").val(), parameter as well.

Answer 1

You can do this to your success action :

window.history.pushState("object or string", "Title", "/new-url"); 

See this post to Modify the URL without reloading the page for a basic how-to.

Additional Note:

1. The first parameter is the data we'll need if the state of the web page changes, for instance whenever someone presses the back or forwards button in their browser. Note that in Firefox this data is limited to 640k characters.
2. title is the second parameter which can be a string, but at the time of writing, every browser simply ignores it.
3. This final parameter is the URL we want to appear in the address bar.

It's now available in most "modern" browsers.

Answer 2

Use the browser history to change the url bar in JS.

      history.pushState()      history.replaceState() 

https://developer.mozilla.org/en-US/docs/Web/API/History_API