volgorde van gebeurtenissen klik op <a> tag

Dus ik heb een normale link op mijn website en ik wil er tracking voor toevoegen. Ik zou me een aantal manieren kunnen voorstellen om dit te doen, maar ik heb dit als erg gemakkelijk gevonden door een kleine jQuery-functie te schrijven en een klein fragment in mijn tags te plaatsen:

click me!

javascript:

function saveClick(someparamhere){
  $.ajax({
   url: "somepage.php",
   data: {param:someparamhere}
  });
}

Nu weet ik dat mijn syntaxis misschien slecht is, ik vraag alleen naar het algemene concept hier. Wanneer u op de koppeling klikt, wil ik dat JavaScript de oproep genereert om op te slaanKlik die meteen een ajax-oproep doet. Er is geen succeshandler omdat het mij niet echt uitmaakt of en wat terugkomt. Ik zal gewoon een SomPage.php loggen bij het evenement. Dan, na dat alles, wil ik dat de tag naar zijn href gaat.

Is dat het geval? Zal de ajax-oproep worden uitgegeven voordat het document naar de andere pagina gaat? Werkt dit in alle gevallen?

Heeft iemand ooit zoiets als dit gedaan? Elke ervaring wordt op prijs gesteld ....

2

2 antwoord

Als je zeker wilt zijn dat de AJAX-oproep doorkomt, zou je kunnen doen:

click me!

$('[data-parameters]').bind('click', function (event) {
    //cache this element to use in AJAX function
    var $this = $(this);

    //prevent the default naviation
    event.preventDefault();

    $.ajax({
       url: "somepage.php",
       data: {param:$this.attr('data-parameters')}
       success : function() {

           //now navigate to the requested page
           location = $this[0].href;
       }
    });
});

UPDATE

$.ajax() exposes a timeout function:

timeoutNumber

     

Stel een time-out in (in milliseconden) voor het verzoek. Dit zal overschrijven   een globale time-out ingesteld met $ .ajaxSetup (). De time-outperiode begint   op het moment dat de $ .ajax-oproep wordt gedaan; als verschillende andere verzoeken binnen zijn   vooruitgang en de browser heeft geen verbindingen beschikbaar, het is mogelijk   voor een verzoek tot time-out voordat het kan worden verzonden. In jQuery 1.4.x en   hieronder zal het object XMLHttpRequest ongeldig zijn als het   verzoek time-out; toegang tot objectleden kan een   uitzondering. Alleen in Firefox 3.0+ kunnen script- en JSONP-verzoeken niet worden gedaan   geannuleerd door een time-out; het script wordt uitgevoerd, zelfs als het erna komt   de time-outperiode.

U zou dus een time-out en een error -functie kunnen instellen die de succes -functie nabootst. De documentatie geeft wel aan dat: het mogelijk is om een ​​time-out uit te voeren voordat deze kan worden verzonden , maar als uw time-out een zeer kleine (misschien nul) vertraging is, kan dit verminder de vertraging tussen de gebruiker die op de link klikt en de browser die de nieuwe pagina laadt.

3
toegevoegd
@jasper, aangezien u gebruikmaakt van gegevensattributen, kunt u $ this.data ('parameters') gebruiken
toegevoegd de auteur Gabriele Petrioli, de bron
@Landon Ja, dat zou een negatieve gebruikerservaring kunnen zijn, maar bekijk de time-out optie voor $. Ajax() , het kan meer lijken op wat je wilt.
toegevoegd de auteur Jasper, de bron
@ GabyakaG.Petrioli Bedankt voor het advies. Ik kan niet geloven dat ik daar nog niet naar heb gekeken, het is ongeveer. 75% sneller om $. Data (element, sleutel, val) te gebruiken dan $ (element) .attr (sleutel, waarde) : jsperf.com/jquery-data-vs-attr-2
toegevoegd de auteur Jasper, de bron
Ik heb deze jsperf bijgewerkt om de uitvoer aan de DOM toe te voegen, zodat je de gegevens kunt verifiëren en het lijkt erop dat $. Data() terugkeert undefined (ik gebruikte het niet goed ), wat betekent dat $ obj.attr() de snelste methode is: jsperf.com/jquery-data-vs-attr-2/2
toegevoegd de auteur Jasper, de bron
ohh, ik denk dat ik dat leuk vind. dat zou mooi verslechteren voor niet-javascript browsers, en het kan nog steeds worden gecrawld door bots en wat niet succesvol, die geen aandacht besteden aan de javascript-dingen. is dat correct? zijn er enige nadelen aan het doen van dit?
toegevoegd de auteur Landon, de bron
ik denk dat je technisch gezien je wat tijd zou verspillen met wachten tot de ajax-oproep terugkomt voordat je je pagina verandert, wat in sommige gevallen merkbaar is.
toegevoegd de auteur Landon, de bron

Ik zou dat simpelweg niet doen ... het zou in de situatie kunnen brengen dat je onclick-evenement niet wordt afgevuurd. Ik denk dat het beter is om een ​​javascript-functie te gebruiken bij een klik die uw ajax-oproep doet en vervolgens de gebruiker naar de doelpagina te brengen.

U kunt dit bijvoorbeeld op deze manier doen:

...

je javascript-functie zal dan iets zijn als:

myfunc(paramofpageclickhere) {
  //do ajax call
  saveClick(someparamhere);
  //go to target page
  location.href = "target.htm";
}
0
toegevoegd
Tip: hij gebruikt jQuery. Dus bind de klikgebeurtenis aan het ankerelement en verwijder die inline JS.
toegevoegd de auteur Sparky, de bron
AFAIK, ja & ja. Natuurlijk kunt u ook in plaats daarvan naar de tekst van de koppeling zelf kijken en daar ook omleiden.
toegevoegd de auteur Sparky, de bron
Ja, zoals in het antwoord van Jasper natuurlijk ... ik ben zeker niet gewend aan "aangepaste html-tags" zoals "data-parameters" ... bevestigen ze dat? En zijn ze compatibel met browsers?
toegevoegd de auteur danicotra, de bron
Geweldig om te horen (... ik bedoel natuurlijk dat ze "over het algemeen" voldoen aan de w3c-validatie en compatibel zijn met andere browsers). Ook een mooi punt om linktekst te bekijken en omleiding om te leiden naar dat op een manier om het gebruik ervan te vermijden (uiteraard zou dit wat extra zorg inhouden en een aantal regels die deze links vormen)
toegevoegd de auteur danicotra, de bron