How to change url after success in ajax without page reload

Answer 1

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

Answer 2

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 3

try this

$(".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);
        window.history.pushState("Details", "Title", "<?php echo base_url(); ?>/yourNewPage");
    }
});

});