Question

我在我的表单中使用jcaptcha进行图像验证。在提交表单之前，我使用javascript进行ajax调用，以验证用户输入的与显示的图像相对应的文本。我得到结果并更新文本框的值（imageVerification）。在执行此ajax调用的函数执行后，我从该刚刚更新的文本框（imageVerification）中获取结果的值。

问题是：我无法从此文本框中获取值（imageVerification）。它总是显示为空白。

Catch：如果我在获取值之前使用alert（），我可以正确地获取值。我在firebug调试模式下运行它，发现即使不使用警报也能在调试模式下工作。

似乎有一个延迟，在此之前文本框（imageVerification）中的值会更新。所以我介绍了一个setTimeout（）方法，并且能够获取该值。

但我不觉得这是正确的解决方案。我假设javascript顺序执行。那么为什么我的声明在通过一种无法立即获得它的方法更新之后获取值。结果即使图像验证成功，我的检查也会失败，因为它无法从文本框中获取结果值。

另外，如果我使用一个简单的函数来更新文本框（imageVerification）而不是ajax调用，我不会遇到这个问题。

以下是我用于ajax调用的代码。

function fetchContainerContent（url，containerid）{

var imageValue = document.forms['ratingForm'].elements['jcaptcha'].value;


    var req = false;
    var parameterString;

    if (window.ActiveXObject) {
        try {
            req = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                req = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    } else if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
    } else {
        return false;
    }

    req.onreadystatechange = function() {
        requestContainerContent(req, containerid);
    }

    parameterString = "jcaptcha="+imageValue;
    req.open('POST', url, true);
    req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    req.send(parameterString);

}

function requestContainerContent(req, containerid) {
    if (req.readyState == 4 && (req.status==200 || window.location.href.indexOf("http")==-1)){

    //document.getElementById(containerid).innerHTML = req.responseText
    //document.getElementById(containerid).value=req.responseText;
    document.forms['ratingForm'].elements[containerid].value = req.responseText;
    }




}

这是图像验证的功能：

function validateImage（）{

if(isBlank(document.forms['ratingForm'].elements['jcaptcha'].value)){
    showError('',"Please enter the text seen in the image above",'jcaptchaError');
    return false;
}
 fetchContainerContent('captchaController','imageVerification');


 var obj = document.forms['ratingForm'].elements['imageVerification'];
//alert('val '+obj.value);
var vall = obj.value;
if(vall=='PASS'){
    return true;

}
else{
    showError('',"Image verification failed. Please refresh image and try again","jcaptchaError");
    return false;
}

}

发布我对fetchContainerContent（'captchaController'，'imageVerification'）的调用后，应该设置imageVerification文本框的值。如果我使用在fetchContainerContent（'captchaController'，'imageVerification'）调用之后注释的警告框，它可以正常工作。

请帮帮我。非常感谢

Answer 1

更新的答案：首次通过时误读程序流程。

基本问题是当XMLHttpRequest需要时间来完成时，你试图从validateImage()函数（return为true或false）立即得到响应。

将根据return采取的行动移至他们自己的职能部门（validFunction，invalidFunction），然后尝试：

function validateImage() {}
  if(isBlank(document.forms['ratingForm'].elements['jcaptcha'].value)){
      showError('',"Please enter the text seen in the image above",'jcaptchaError');
      return false;
  }

  var obj = document.forms['ratingForm'].elements['imageVerification'];

  validReq = fetchContainerContent('captchaController','imageVerification');
  validReq.onload = function () {
    var validResp = this.reponseText;
    if(validResp=='PASS'){
        validFunction();
    }
    else{
        showError('',"Image verification failed. Please refresh image and try again","jcaptchaError");
        invalidFunction();
    }
  }

  validReq.send(parameterString);
}

function fetchContainerContent(url, containerid) {
var imageValue = document.forms['ratingForm'].elements['jcaptcha'].value;
    var req = false;
    var parameterString;

    if (window.ActiveXObject) {
        try {
            req = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                req = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    } else if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
    } else {
        return false;
    }

    parameterString = "jcaptcha="+imageValue;
    req.open('POST', url, true);
    req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    return req;
}

在ajax函数执行后html文本框值更新之前有一段延迟

1 个答案: