为什么没有使用 XMLHttpRequest 从 PHP 中显示 Recaptcha？

Question

::EXPLINATION::

在一个 HTML 文件中，我试图加载一个带有验证码检查的注册框架。表格本身会显示出来。验证码没有。所以我知道 javascript（在下面发布）得到了我想要的。但是有一些问题导致我的验证码无法显示。

最后一点，我的目标是一个 id 为“splashTarget”的 div，我使用 CSS 来安排我想要的一切。我不会发布它，因为它可能不相关，但如果您认为我确实需要发布它以获得帮助，请告诉我。

::CODE::

似乎不起作用的表格：

<div class="splash"> </div>
<div style="text-align:left" id="registrationSplash" class="splashContent">
    <div style="text-align:right">
        <a style="color:darkred" href="javascript:closeSplash()">[ CANCEL ]</a>
    </div>
    <h1>REGISTER</h1>
    <form action="" method="post" id="registerForm">
                <?PHP
                require_once('recaptchalib.php');
                $publickey = "[censored]";                  
                echo recaptcha_get_html($publickey);
                echo '<!--'.recaptcha_get_html($publickey).'-->';
                ?>
        <table>
            <tr>
                <td>First Name:</td>
                <td><input type="text" name="firstname" maxlength="60"></td>
                <td>Username:</td>
                <td><input type="text" name="username" maxlength="30"></td>
            </tr>

            <tr>
                <td>Last Name:</td>
                <td><input type="text" name="lastname" maxlength="60"></td>
                <td>Password:</td>
                <td><input type="password" name="pass" maxlength="30"></td>
            </tr>

            <tr>
                <td>E-mail Address:</td>
                <td><input type="text" name="firstname" maxlength="60"></td>
                <td>Confirm Password:</td>
                <td><input type="password" name="pass2" maxlength="30"></td>
            </tr>

            <tr>
                <th colspan=4 style="text-align:right">

                <button onclick="submitFormRegisterSplash()" type="button" name="submit" value="Login">Register!</button>
                </th>
            </tr> 
        </table>
    </form>

    <div id="status" />
</div>

对 recaptia 的实际调用。

                <?PHP
                require_once('recaptchalib.php');
                $publickey = "[censored]";
                echo recaptcha_get_html($publickey);
                echo '<!--'.recaptcha_get_html($publickey).'-->';
                ?>

用于加载注册表单的Javascript函数：

function onRegisterClicked() {
    var onRegisterClickedHttp;

    if(window.XMLHttpRequest) {
        onRegisterClickedHttp = new XMLHttpRequest();

        onRegisterClickedHttp.onreadystatechange = function() {
            if(onRegisterClickedHttp.readyState==4 && onRegisterClickedHttp.status==200) {
                var response = onRegisterClickedHttp.responseText;
                document.getElementById("splashTarget").innerHTML = response;
            }
        }
    }

    onRegisterClickedHttp.open("GET", "Verification/RegisterSplash.php", true);
    onRegisterClickedHttp.send();
}

调用创建后网页上的结果

<div id="splashTarget">

<div class="splash"> </div>
<div style="text-align:left" id="registrationSplash" class="splashContent">
    <div style="text-align:right">
        <a style="color:darkred" href="javascript:closeSplash()">[ CANCEL ]</a>
    </div>
    <h1>REGISTER</h1>
    <form action="" method="post" id="registerForm">
                <script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LehEsgSAAAAAAH2xfKSXKSdldMwoiOqZyO5TupV"></script>

    <noscript>
        &lt;iframe src="http://www.google.com/recaptcha/api/noscript?k=6LehEsgSAAAAAAH2xfKSXKSdldMwoiOqZyO5TupV" height="300" width="500" frameborder="0"&gt;&lt;/iframe&gt;&lt;br/&gt;
        &lt;textarea name="recaptcha_challenge_field" rows="3" cols="40"&gt;&lt;/textarea&gt;
        &lt;input type="hidden" name="recaptcha_response_field" value="manual_challenge"/&gt;
    </noscript><!--<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LehEsgSAAAAAAH2xfKSXKSdldMwoiOqZyO5TupV"></script>

    <noscript>
        <iframe src="http://www.google.com/recaptcha/api/noscript?k=6LehEsgSAAAAAAH2xfKSXKSdldMwoiOqZyO5TupV" height="300" width="500" frameborder="0"></iframe><br/>
        <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
        <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
    </noscript>-->      <table>
            <tbody><tr>
                <td>First Name:</td>
                <td><input type="text" name="firstname" maxlength="60"></td>
                <td>Username:</td>
                <td><input type="text" name="username" maxlength="30"></td>
            </tr>

            <tr>
                <td>Last Name:</td>
                <td><input type="text" name="lastname" maxlength="60"></td>
                <td>Password:</td>
                <td><input type="password" name="pass" maxlength="30"></td>
            </tr>

            <tr>
                <td>E-mail Address:</td>
                <td><input type="text" name="firstname" maxlength="60"></td>
                <td>Confirm Password:</td>
                <td><input type="password" name="pass2" maxlength="30"></td>
            </tr>

            <tr>
                <th colspan="4" style="text-align:right">

                <button onclick="submitFormRegisterSplash()" type="button" name="submit" value="Login">Register!</button>
                </th>
            </tr> 
        </tbody></table>
    </form>

    <div id="status">
</div>

</div></div>

正在使用的网站是 gumonshoe dot net slash Registration 您需要选择尝试注册才能看到弹出窗口。我禁用了创建初始屏幕的 CSS，认为它可能是 z-indexes 的问题。好像不是这样的。

感谢任何提示。

Answer 1

HTML 表单确实有效（请参阅http://jsfiddle.net/5p5K3/）。该错误是由一个特性引起的：

<script> 使用.innerHTML = ... 注入的标签。 <script> 没有被解析（这些标签内的函数和变量没有被定义，也没有被调用）。您必须在页面中包含验证码，而不是使用 AJAX 添加它。

编辑

添加此 HTML 代码（在 <head> 块内）：

<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>

用我的建议覆盖你的函数（用你的公钥替换<PUBLIC kEY HERE>）：

function onRegisterClicked() {
    Recaptcha.create("<PUBLIC KEY HERE>", "splashTarget", {
        theme: "red",
        callback: Recaptcha.focus_response_field
    });
}

Answer 2

明显问题：插入的recaptcha 代码被<!-- --> 注释掉。注释掉的 html/js 不会被渲染/执行。改变

echo '<!--'.recaptcha_get_html($publickey).'-->';

到

echo recaptcha_get_html($publickey);