Comment faire face à jquery ajax commentaires et captcha

Question

Je travaille sur un système de commentaires sur un réseau social, j'utilise jquery, je peux poster les commentaires avec ajax sans problème mais parfois j'ai besoin d'un utilisateur pour soumettre un formulaire captcha s'ils affichent trop de commentaires ou pour d'autres raisons.

Je pense que la meilleure façon de le faire est de l'ajouter dans la partie actuelle de publication de commentaires, si le script php renvoie une réponse, indiquant que nous devons faire un formulaire captcha, puis je voudrais ouvrir un fenêtre de dialogue sur l'écran, laissez l'utilisateur remplir le formulaire captcha, puis continuer et poster un commentaire. Ceci est quelque peu complexe pour moi mais je l'ai fait la plupart du temps je pense, peut-être vous pouvez lire mes commentaires ci-dessous et m'aider avec la partie captcha, principalement sur comment je peux déclencher une boîte de dialogue pour ouvrir, comment je peux passer la valeur de commentaire/texte par le captcha et revenir au commentaire backen à nouveau sur sucess et même si l'utilisateur obtient le captcha mal, alors il sera recharger le captcha

$.ajax({ 
    type: "POST", 
    url: "processing/ajax/commentprocess.php?user=", 
    data: args, 
    cache: false, 
    success: function (resp) { 
     if (resp == 'captcha') { 
      //they are mass posting so we need to give them the captcha form 
      // maybe we can open it in some kind of dialog like facebox 
      // have to figure out how I can pass the comment and user data to the captcha script and then post it 
     } else if (resp == 'error') { 
      // there was some sort of error so we will just show an error message in a DIV 
     } else { 
      // success append the comment to the page 
     }; 
    } 
}); 

Answer 1

Je pense que je choisirais pour utiliser le modal dialog that comes with the jQuery UI library. Ensuite, je voudrais envelopper l'appel AJAX dans une fonction afin que je puisse l'appeler récursivement. Je voudrais créer un DIV (#captchaDialog) qui a manipulé l'affichage de l'image Captcha et une entrée (#captchaInput) pour entrer la réponse. Lorsque l'utilisateur clique sur le bouton OK dans la boîte de dialogue modale, je modifie les arguments d'origine avec la nouvelle réponse captcha et rappelle la fonction. Puisque cette solution modifie simplement les arguments d'origine et les repasse sur la même URL, je crois que cette solution fonctionnera pour vous.

Quelques exemples de code, moins la div et l'entrée de la boîte de dialogue modale:

var postComment = function(args) { 
    $.ajax({ 
     type: "POST", 
     url: "processing/ajax/commentprocess.php?user=", 
     data: args, 
     cache: false, 
     success: function (resp) { 
      if (resp == 'captcha') { 
       $("#captchaDialog").dialog({ 
        bgiframe: true, 
        height: 140, 
        modal: true, 
        buttons: { 
        ok: function() { 
         args.captchaResponse = $(this).find("#captchaInput").val(); 
         postComment(args); 
        } 
        } 
       }); 
      } else if (resp == 'error') { 
       // there was some sort of error so we will just show an error message in a DIV 
      } else { 
       // success append the comment to the page 
      }; 
     } 
    }); 
}; 

Hope this helps!

Answer 2

Side pensée:

Pour une meilleure expérience utilisateur, je serais obligé de bien envisager la mise en œuvre inverse CAPTCHA:

http://www.ccs.uottawa.ca/webmaster/reverse-captcha.html

Je comprends cela ne répond pas aux besoins de votre question, mais je devais au moins le mentionner. C'est une méthode de prévention du spam qui ne nécessite aucune intervention de la part de vos utilisateurs.