web-dev-qa-db-fra.com

jQuery: Capturez l'ancre href onclick et soumettez de manière asynchrone

Je ne joue presque jamais avec des trucs côté client, et cette tâche vraisemblablement simple me donne des coups de pied :)

J'ai quelques liens. OnClick je veux empêcher l'action par défaut, capturer son URL href, soumettre un ajax GET à cette URL, et simplement alert() avec les résultats ... mais je ne peux même pas dépasser la ligne de départ :)

Exemples d'ancres pour le temps de jeu:

<a class="asynch_link" href="good/1.html">Click Here</a>
<a class="asynch_link" href="good/2.html">Click Here</a>

Maintenant, j'ai joué avec quelques suggestions pour des demandes similaires sur SO, mais les liens amènent toujours le navigateur à naviguer vers l'URL href.

Même avec juste

<script type="text/javascript">
    $('a').click(function (event) 
    { 
         event.preventDefault(); 
         //here you can also do all sort of things 
    });
</script>

... les liens naviguent toujours vers l'autre page.

Je me sens un peu comme un bébé ici :)

Toute aide sera grandement appréciée.

Et, oui, je [~ # ~] suis [~ # ~] y compris jQuery :)
<script src="//67.20.99.206/javascripts/jqueryCountdown/1-5-11/jquery.countdown.js" type="text/javascript" charset="utf-8"></script>

jqueryajaxhyperlinkanchor
29
mOrloff
$('a').click(function(event) { 
    event.preventDefault(); 
    $.ajax({
        url: $(this).attr('href'),
        success: function(response) {
            alert(response);
        }
    });
    return false; // for good measure
});
39
mOrloff

Essaye ça

$('a').click(function (event) 
{ 
   event.preventDefault(); 

   var url = $(this).attr('href');
   $.get(url, function(data) {
     alert(data);
    });

 });
19
codingbiz

Le problème ici est que les événements ne sont pas attachés à votre élément car ils ne sont pas liés dans un événement DOM ready. Essayez d'inclure vos événements dans l'événement DOM ready et si cela fonctionne, vous verrez l'alerte

<script> 
    $(function() {
         $('a').click(function(event) {
            event.preventDefault();
            alert('fff')
        //here you can also do all sort of things 
        });
    }); 
</script>

Après cela, envoyez la demande Ajax et soumettez le formulaire dans la fonction de rappel réussi.

<script> 
    $(function() {
         $('a').click(function(event) {
             event.preventDefault();
             $.ajax({
                 url: 'url',
                 dataType :'json',
                 data : '{}',
                 success :  function(data){
                     // Your Code here

                     $('#form').submit();
                 }
             })
        });
    }); 
</script>
4
Sushanth --