如何处理jquery ajax评论和验证码

Question

我正在研究社交网络上的评论系统,我正在使用jquery,我可以用ajax发布评论没有问题,但有时我需要用户提交验证码表格,如果他们发布了太多评论或其他原因.

我认为最好的方法是将它添加到当前的评论发布部分,如果php脚本返回一个响应,说明我们需要做一个验证码表单,那么我想自动打开一个对话窗口屏幕,让用户填写验证码表格,然后继续发布评论.

这对我来说有点复杂,但我认为大部分都已完成,也许你可以阅读下面的评论并帮我解决验证码部分,主要是关于如何触发对话框打开,如何传递评论值/文本通过验证码并返回到成功再次回复评论,如果用户得到验证码错误,那么它将重新加载验证码

$.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

我想我会选择使用jQuery UI库附带的模态对话框.然后,我将AJAX调用包装在一个函数中,以便我可以递归调用它.我会创建一个DIV(#captchaDialog)来处理显示Captcha Image和一个输入(#captchaInput)来输入答案.当用户单击模态对话框上的OK按钮时,我将使用新的验证码响应修改原始args并调用该函数.由于此解决方案只是修改原始args并将其重新分配到相同的URL,我相信此解决方案将适合您.

一些示例代码,减去模式对话框的div和输入:

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
            };
        }
    });
};

希望这可以帮助!