javascript - php/javascript |如何仅重新加载验证码图像？

Question

我想刷新我的验证码图像。我的意思只是图像标签。

我将首先向您展示我的代码。

<?php 
include_once("./common/top.php");
require_once("./captcha/captcha.php");
?>

<div class="" style="background:#F7F7F7;">

    <div id="wrapper">
        <div id="signup" class="animate form">
            <section class="login_content">
                <form id="signup" name="signup" class="signupForm" onsubmit="return false;" method="post" action="signup.html";>
                    <h1>Create Account</h1>
                    <div>
                        <input type="email" id="inputEmail" name="inputEmail" class="form-control" placeholder="Email" required="" />
                    </div>
                    <div>
                        <input type="password" id="inputPassword" name="inputPassword" class="form-control" placeholder="Password" required="" />
                    </div>
                    <div>
                        <input type="password" id="inputCPassword" name="inputCPassword" class="form-control" placeholder="Conform Password" required="" />
                    </div>
                    <div id="RELOAD"><!-- Reload here! -->
                        <img class="captcha_code" src="<?= captcha::image() ?>" />
                        <button type="button" id="refresh_btn" class="btn btn-defualt" style="background-color:rgb(115, 135, 156); color:white;"><span class="glyphicon glyphicon-refresh"></span> Refresh</button><!-- TODO -->
                    </div><br>
                    <div>
                        <input type="text" id="inputCNum" name="inputCNum" class="form-control" placeholder="Number" required="" />
                    </div>
                    <div>
                        <a id="signup_btn" class="btn btn-default" href="index.html">Sign up</a>
                    </div>
                    <div class="clearfix"></div>
                    <div class="separator">

                        <p class="change_link">Already a member ?
                            <a href="signin.html" class="to_register"> Sign in </a>
                        </p>
                        <div class="clearfix"></div>
                        <br />
                        <div>
                            <h1><i class="fa fa-gamepad" style="font-size: 26px;"></i> GAMEPARTY</h1>
                        </div>
                    </div>
                </form>
                <!-- form -->
            </section>
            <!-- content -->
        </div>

    </div><!-- wrapper -->
</div>
<?php include_once("./common/bottom.php"); ?>

这是html页面，我想在单击refresh_btn时刷新div中的验证码图像，其id为RELOAD。

您可以看到代码顶部的“require_once(./captcha/captcha.php)”，这就是我在 src 属性中调用 captcha 类中名为 image 的函数的原因。

下面的代码是放置在 captcha 类中的图像函数。

public static function image(){
    $length = 6;
    $code = self::generate_code($length);

    ob_start();

    $image = imagecreatetruecolor(self::get_width(),self::get_height());
    $white = imagecolorallocate($image, 255, 255, 255);
    imagefilledrectangle($image, 0, 0, self::get_width(), self::get_height(), $white);

    for($dot = 0; $dot < 2000; $dot++) {
        $r = rand(0, 255);
        $g = rand(0, 255);
        $b = rand(0, 255);

        $dot_color = imagecolorallocate($image, $r, $g, $b);

        $x1 = rand(0, self::get_width());
        $y1 = rand(0, self::get_height());
        $x2 = $x1 + 1; // 1px to the right
        $y2 = $y1 + 1; // 1px to the top

        imageline($image, $x1, $y1, $x2, $y2, $dot_color);
    }


     for($start = - $length; $start < 0; $start++) {
        $color = imagecolorallocate($image, rand(0,70), rand(0,70), rand(0,70));
        $character = substr($code, $start, 1);

        $x = ($start+6) * self::$character_width;
        $y = rand(self::get_height() - 30, self::get_height() - 20);

        imagestring($image, self::$font_size, $x, $y, $character, $color);          
     }

    imagepng($image); //Output a PNG image from the given $image to either the browser or a file. *Print the raw image stream if the filepath isn't existed or null*
    imagedestroy($image); //Frees any memory associated with image image.

    $source = ob_get_contents();
    ob_end_clean();

    return "data:image/png;base64,".base64_encode($source);
}

我想知道的是如何只刷新验证码img？请告诉我。非常感谢。

<小时/>

我已更改为 reCaptcha，这是代码。

[html]

<div><!-- reCaptcha -->
    <a class="btn" id="refresh_btn" style="display:inline;"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> reset</a><div id="reCaptcha" style="transform:scale(0.8);transform-origin:0 0;margin: auto; width:70%"></div>                            
</div>

[javascript]

<script language="javascript">
var widgetId;
var refresh_btn = document.getElementById('refresh_btn'); 
var verifyCallback = function(response) {
    //console.log("verifyCallback response : " + response);
    if (response != "") {
        checkRobot();
    }
};

var onloadCallback = function() {
    widgetId = grecaptcha.render(document.getElementById('reCaptcha'), {
        'sitekey' : 'mykey',
        'callback' : verifyCallback,
        'theme' : 'light'
    });
}; 

function checkRobot() {
    $.ajax({
        type : "POST"
        , url : 'url'
        , cache : false
        , data : {"g-recaptcha-response" : $(".g-recaptcha-response").val()}
        , success : function(data){
            console.log('data : ' + data);
        }
    });
}

onloadCallback 函数在加载时被调用，并且 reCaptcha 字段由 widgetId 呈现。因此，我在标题底部的 url 后面添加了查询，如下所示。

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"async defer></script>

我使用ajax在checkRobot函数中获取json数据。这是服务器端 php 代码。

<?php 
if(isset($_POST["g-recaptcha-response"]) && $_POST["g-recaptcha-response"]) {
    //var_dump($_POST);

    $secret = "secretKey";
    $remoteip = "127.0.0.1:80"; //I'm testing on localhost.(port:80 is required)
    $response = $_POST["g-recaptcha-response"];

    $url = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$secret&response=$response&remoteip=$remoteip");
    //var_dump($url);
    $arr = json_decode($url, TRUE);

    if($arr["success"]) {
        echo "success";
    }else {
        echo "spam";
    }
}
?>

Answer 1

哇!当已经编写了一些非常好的验证码时，您已经经历了很多麻烦来创建自己的验证码。

例如reCAPTCHA这是在 SO 上使用的。