為什么不使用XMLHttpRequest從PHP中顯示Recaptcha？

Question

:: EXPLINATION ::

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

實際調用重現能力。

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

實際使用的網站是“ gongshoe dot net slash”。您需要選擇嘗試注冊才能看到彈出窗口。 我禁用了創建初始屏幕的CSS，以為它可能是z-indexes的問題。 事實並非如此。

感謝您的提示。

Answer 1

HTML表單可以工作（請參閱http://jsfiddle.net/5p5K3/ ）。 該錯誤是由以下功能引起的：

使用.innerHTML = ...注入的<script>標記。 <script>不會被解析（這些標簽中的函數和變量沒有定義，也沒有調用）。 您必須在頁面內包含CAPTCHA代碼，而不是使用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);