Vous recherchez des conseils de syntaxe sur la mise en œuvre du projet AJAX

StackOverflow https://stackoverflow.com/questions/5981859

Question

J'entreprends mon premier projet AJAX et j'ai tout tracé conceptuellement pour la plupart, mais je suis retenu en raison de mon manque de connaissances syntaxiques.Je pense que je pourrais aussi être légèrement à côté de ma logique structure/fonction.

Je recherche des conseils, même s'il s'agit d'une référence à des didacticiels ou de toute correction de ce qui me manque ou que j'oublie.

profil.php :c'est la page qui a l'icône de pouce sur laquelle cliquer et le $.post fonction:

Voici la structure du pouce.

Lorsque l'on clique sur le pouce, dois-je envoyer l'identifiant du commentaire ?Je sais que je dois calculer le fait qu'il a été cliqué d'une manière ou d'une autre et l'envoyer au $.Zone de publication au bas de cette page, je dois également mettre une sorte de variable php dans le compteur pouce div pour incrémenter les nombres lorsque le $.Le message confirme qu'il a été cliqué.

<div id="thumb_holder">
    <div id="thumb_report">
        <a href="mailto:info@cysticlife.org">
            report
        </a>
    </div>
    <div id="thumb_counter">
        +1
    </div>
    <div id="thumb_thumb">

        <?php $comment_id = $result['id'];?>
        <a class="myButtonLink" href="<?php echo $comment_id; ?>"></a>

    </div>
</div>

Voici la $.post fonction

L'identifiant du commentaire devrait-il être envoyé ?Mais il faudrait très certainement envoyer un enregistrement du lien pouce cliqué et l'envoyer d'une manière ou d'une autre à ma page php qui parle à la base de données.

<script>
$.ajax({
 type: 'POST',
 url:" http://www.cysticlife.org/thumbs.php,"
 data: <?php echo $comment_id; ?>,
 success: success
 dataType: dataType
});
</script>

pouces.php :est la page sur laquelle la demande d'incrémentation est envoyée lorsque l'on clique sur le pouce, puis indique à son tour à la base de données de stocker un clic, je n'ai encore vraiment rien sur cette page.Mais je suppose qu'un enregistrement du clic sera transmis via $.post fonction de l'autre page dont, syntaxiquement, je n'ai aucune idée de la façon dont cela fonctionnerait, puis via une requête d'insertion, j'enverrai cet enregistrement dans la base de données.

Voici ce que contient la table de la base de données

J'ai trois lignes :un id qui incrémente automatiquement.un comment_id afin qu'il sache quel commentaire est "aimé" et enfin un likes pour suivre le nombre de pouces levés.

Était-ce utile?

La solution

Au moins tu as pris un bon départ, il y a encore quelques erreurs.Tout d’abord, il y a quelques principes de base auxquels vous voudrez peut-être vous habituer :

1) How to create a click event

Tout d’abord le bouton, j’ai inséré « 2 » comme href.

<a class="myButtonLink" href="2">Vote Up!</a>

EDIT:Juste au cas où JS serait désactivé, ce serait une meilleure option :

<a class="myButtonLink" href="voteup.php?id=2" id="2">Vote Up!</a>

Puis le JS :

$('.myButtonLink').click(function(e) {
  e.preventDefault();
  alert('the button has been clicked!');
});

Le e représente l'événement, donc la première chose que nous faisons après la soumission est d'annuler l'action par défaut (redirection vers « 2 »).Ensuite, nous alertons que le bouton a été cliqué.Si cela fonctionne, nous pouvons passer à l'étape suivante.

2) Getting the ID value from the clicked link.

Dans la fonction clic, nous pouvons utiliser $(this), c'est une représentation de l'élément cliqué.jQuery nous fournit un ensemble de fonctions pour obtenir les attributs d'un élément donné, c'est exactement ce dont nous avons besoin.

$('.myButtonLink').click(function(e) {
  e.preventDefault();

  var comment_id = $(this).attr('id');
  alert('We are upvoting comment with ID ' + comment_id);
});

Lorsque tout se passe bien, cela devrait alerter « Nous votons pour le commentaire avec l'ID 2 ».Alors, passons à l'étape suivante !

3) Sending the Request

Cela pourrait être l'étape la plus difficile si vous débutez avec ajax/jquery.Ce que vous devez savoir, c'est que les données que vous envoyez peuvent être une chaîne d'URL (param=foo&bar=test) ou un tableau javascript.Dans la plupart des cas, vous travaillerez avec une chaîne d'URL car vous demandez un fichier.Assurez-vous également d'utiliser des liens relatifs (« ajax/upVote.php » et non « http://www.mysite.com/ajax/upVote.php »).Voici donc un petit code de test :

$('.myButtonLink').click(function(e) {
  e.preventDefault();

  var comment_id = $(this).attr('id');

  $.ajax({
    type: 'POST',
    url: 'thumbs.php',
    data: 'comment_id=' + comment_id,
    success: function(msg) { alert(msg); }
});

le dataType est détecté automatiquement, vous pouvez par exemple choisir entre une réponse JSON (qui peut être un tableau avec un statut et un message de réponse) ou simplement du texte brut.Gardons les choses simples et prenons le texte brut pour commencer.

Ce script appelle thumbs.php et envoie une valeur $_POST ($_POST['comment_id'] = 2) avec cette requête.Sur thumbs.php vous pouvez maintenant faire la partie PHP qui est :

1) checking if the comment_id is valid
2) upvoting the comment
3) print the current amount of votes back to the screen (in thumbs.php)

Si vous imprimez le nombre de votes à l'écran, le dernier script que je vous ai donné alertera une boîte de message contenant le nombre de votes.

4) Returning an array of data with JSON

Afin d'obtenir une réponse appropriée sur votre écran, vous pouvez envisager de renvoyer un tableau tel que :

$arr = array(
  'result' => 'success', // or 'error'
  'msg' => 'Error messag' // or: the amount of votes
)

Ensuite, vous pouvez l'encoder en utilisant la fonction php json_encode($arr).Vous pourrez alors obtenir une réponse plus décente avec votre script en utilisant ceci :

$('.myButtonLink').click(function(e) {
  e.preventDefault();

  var comment_id = $(this).attr('id');

  $.ajax({
    type: 'POST',
    url: 'thumbs.php',
    data: 'comment_id=' + comment_id,
    success: function(data) {
      if(data.result == "error") {
        alert(data.msg);
      } else {
        alert('Your vote has been counted');
        $('#numvotes').html(data.msg);
      }
    }
});

Comme vous pouvez le voir, nous utilisons (data) au lieu de (msg) puisque nous renvoyons un ensemble de données.Le tableau en PHP ($arr['result']) peut être lu comme data.result.Au début, nous vérifions quel est le résultat (erreur ou succès), s'il s'agit d'une erreur, nous alertons le message envoyé (mauvaise connexion à la base de données, mauvais identifiant de commentaire, impossible de compter les votes, etc.etc.) du résultat est un succès, nous alertons que le vote a été compté et mettons le nombre (mis à jour) de votes dans un élément div/span/other avec l'ID 'numvotes'.

J'espère que cela vous a été utile ;-)

//modifier:J'ai remarqué quelques erreurs avec les balises de code.Correction de la première partie du « manuel ».

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top