web-dev-qa-db-ja.com

ページをリロードせずにajaxで成功した後にURLを変更する方法

これは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);
    }
  })
})_

これは機能しますが、多くのパラメーターがあり、もちろんdata: "urut="+$(".urut").val(),パラメーターもあるので、URLを変更したいです。

20

ほとんどの「モダン」ブラウザでこれを実行できるようになりました!

あなたの成功アクションにこれを行うことができます:

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

基本的なハウツーについては、この投稿を参照してください ページをリロードせずにURLを変更 .

追加のメモ:

  1. 最初のパラメーターは、Webページの状態が変化した場合に必要なデータです。たとえば、誰かがブラウザーの「戻る」または「進む」ボタンを押した場合などです。 Firefoxでは、このデータは640k文字に制限されています。
  2. titleは2番目のパラメーターであり、文字列にすることもできますが、執筆時点では、すべてのブラウザーは単に無視します。
  3. この最後のパラメーターは、アドレスバーに表示するURLです。
31

ブラウザの履歴を使用して、JSのURLバーを変更します。

      history.pushState()
     history.replaceState()

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

6
ArtisticPhoenix

これを試して

$(".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");
    }
});

});

4