web-dev-qa-db-fra.com

Comment changer d'URL après un succès dans ajax sans recharger une page

C'est l'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);
    }
  })
})

Cela fonctionne, mais je veux que l'URL change car j'ai de nombreux paramètres et bien sûr avec le paramètre data: "urut="+$(".urut").val(),.

javascriptphpjqueryajax
20
Dimas Adi Andrea

Vous pouvez maintenant le faire dans la plupart des navigateurs "modernes"!

vous pouvez faire cela pour votre action de réussite:

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

Voir ce post à Modifier l'URL sans recharger la page pour un tutoriel de base.

Remarque additionnelle:

  1. Le premier paramètre concerne les données dont nous aurons besoin si l’état de la page Web change, par exemple chaque fois que quelqu'un appuie sur le bouton précédent ou suivant de son navigateur. Notez que dans Firefox, ces données sont limitées à 640 000 caractères.
  2. titre est le deuxième paramètre qui peut être une chaîne, mais au moment de l'écriture, chaque navigateur l'ignore simplement.
  3. Ce dernier paramètre est l'URL que nous voulons voir apparaître dans la barre d'adresse.
31
Sherly Febrianti

Utilisez l'historique du navigateur pour modifier la barre d'adresse dans JS.

      history.pushState()
     history.replaceState()

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

6
ArtisticPhoenix

essaye ça

$(".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
anik islam Shojib