web-dev-qa-db-fra.com

Accéder à l'URL d'une requête jQuery Ajax dans la fonction de rappel

Existe-t-il un moyen de voir l'URL demandée lorsque je fais une demande Ajax avec jQuery?

par exemple.,

var some_data_object = { ...all sorts of junk... }
$.get('/someurl.php',some_data_object, function(data, textStatus, jqXHR) {
   var real_url = ? # <-- How do I get this
})

Comment puis-je accéder à l'URL que jQuery a réellement utilisée pour effectuer la demande? Peut-être une méthode/propriété de jqHXR? Je ne pouvais pas le trouver dans la documentation.

Merci.

49
Chris W.

Définissez un point de rupture dans la méthode de réussite, puis regardez

this.url

est l'URL réelle de la demande.

75
airbai

Voici une solution possible:

  1. Attrapez l'appel ajax before il est envoyé au serveur en implémentant la fonction beforeSend callback. 
  2. Enregistrer l'URL et les données
  3. Signalez-le dans le message d'erreur que vous générez.

    var url = "";
    
    $.ajax({
      url: "/Product/AddInventoryCount",
      data: { productId: productId, trxDate: trxDate, description: description, reference: reference, qtyInCount: qtyInCount }, //encodeURIComponent(productName)
      type: 'POST',
      cache: false,
      beforeSend: function (jqXHR, settings) {
        url = settings.url + "?" + settings.data;
      },
      success: function (r) {
        //Whatever            
      },
      error: function (jqXHR, textStatus, errorThrown) {
        handleError(jqXHR, textStatus, errorThrown, url);
      }
    });
    
    function handleError(jqXHR, textStatus, errorThrown, url) {
       //Whatever
    }
    
16
Dror

Utiliser $.ajaxPrefilter:

// Make sure we can access the original request URL from any jqXHR objects
$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
  jqXHR.originalRequestOptions = originalOptions;
});

$.get(
  'http://www.asdf.asdf'
).fail(function(jqXHR){
  console.log(jqXHR.originalRequestOptions);
  // -> Object {url: "http://www.asdf.asdf", type: "get", dataType: undefined, data: undefined, success: undefined}
});

http://api.jquery.com/jQuery.ajaxPrefilter/

8
Chris Bloom

Il semble que le gestionnaire global ajaxSend ( http://api.jquery.com/ajaxSend/ ) fournisse l’url dans ses paramètres de paramètres. Vous pouvez stocker un mappage de l'objet xhr à l'URL de votre rappel ajaxSend, puis, dans votre rappel de succès, recherchez-le en fonction de l'objet xhr qu'il vous fournit.

var mappings = {};

$.ajaxSend(function(event, xhr, settings) {
   mappings[xhr] = settings.url;
});

$.ajax({
  url: "http://test.com",
  success: function(data, textStatus, xhr) {
    console.log("url = ", mappings[xhr]);
    delete mappings[xhr];
  }
});

Cela a l'avantage de ne pas avoir à modifier chaque objet $ .ajax ().

2
Paul I

Je ne pouvais pas le trouver dans la documentation non plus. Peut-être juste l'ajouter à l'objet jqXHR à travers un wrapper "proxy" comme ...

Je n'ai pas testé cela, vous devrez peut-être appeler $.param() et concat à l'URL. Voir http://api.jquery.com/jQuery.param/

var myGet = function(url, data, success) {
    $.get(url, data, function(data, textStatus, jqXHR) {
       jqXHR.origUrl = url; // may need to concat $.param(data) here
       success(data, textStatus, jqXHR);
    });
}

usage:

var some_data_object = { ...all sorts of junk... }
myGet('/someurl.php',some_data_object, function(data, textStatus, jqXHR) {
   var real_url = jqXHR.origUrl;
})
1
JeremyWeir

Pour votre information, en tant que complément au commentaire d’airbai (je ne peux pas commenter dans sa réponse), vous pouvez ajouter vos propres données à l’appel et les récupérer dans les rappels. De cette façon, vous n'avez pas à analyser l'URL.

Dans cet exemple de requête JSONP, j'ai ajouté la variable user_id (testée avec jQuery 3.2):

var request = $.ajax({
    dataType: "json",
    url: "http://example.com/user/" + id + "/tasks?callback=?",
    user_id: id,
    success: function(data) {
        console.log('Success!');
        console.log("User ID: " + this.user_id);
    },
    timeout: 2000
}).fail(function() {
    console.log('Fail!');
    console.log("User ID: " + this.user_id);
});
0
jotaelesalinas