php - 为什么 Recaptcha 没有从使用 XMLHttpRequest 的 PHP 中显示出来？

Question

::说明::

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

最后一点，我的目标是一个 ID 为“splashTarget”的 div，我使用 CSS 来按照我想要的方式排列所有内容。我不会发布它，因为它可能不相关，但如果您认为我确实需要发布它来获取帮助，请告诉我。

::代码::

似乎不起作用的表单:

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

正在运行的网站是 gutonshoe 点网斜线注册 您需要选择尝试注册才能看到弹出窗口。我禁用了创建启动屏幕的 CSS，认为这可能是 z 索引的问题。事实似乎并非如此。

感谢您的任何提示。

Answer 1

HTML 表单确实有效(请参阅 http://jsfiddle.net/5p5K3/ )。该错误是由以下功能引起的:

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

编辑

添加此 HTML 代码(在 <head> block 内):

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