使用AJAX PHP请求填充html <img/>

时间:2017-06-03 08:44:44

标签: php jquery html ajax

大家好,所以我正在尝试使用PHP

创建此captcha maker的OOP样式

我有这个Captcha类来处理验证码图像的实际制作

class Captcha{

    private $image;
    private $background;
    private $linecolor;
    private $textcolor;

    private $text;
    private $possible;
    private $possibleLen;
    private $randText;

    public function getCaptcha(){
        $image = $this->image;
        $linecolor = $this->linecolor;
        $textcolor = $this->textcolor;

        $text = $this->text;
        $possible= $this->possible;
        $possibleLen = $this->possibleLen;
        $randText = $this->randText;

        // set the image size
        $image = @imagecreatetruecolor(150, 50) or die("Cannot Initialize new GD image stream");
        // set colors to the image
        $background = imagecolorallocate($image, 255, 250, 250); // color white
        imagefill($image, 0, 0, $background);

        $linecolor = imagecolorallocate($image, 112, 138, 144); //color gray
        $textcolor = imagecolorallocate($image, 49, 79, 79); //color greenish

        //draw random lines on canvas
        for($i=0; $i < 6; $i++) {
            imagesetthickness($image, rand(1,3));
            imageline($image, 0, rand(0,30), 120, rand(0,30), $linecolor);
        }

        session_start();

        // generate random text
        $text = "";
        $possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        $possibleLen = strlen($possible);

        for($i=0; $i < 5; $i++ ){
            $randText = $possible[rand(0, $possibleLen - 1)];
            $text .= $randText;
            imagechar($image, rand(3, 5), $i, rand(2, 14), $randText, $textcolor);
        }

        // record digits in session variable
        $_SESSION['captcha'] = $text;

        return json_encode(array('image'=>$image));
    }
}

我有这个handler.php文件可以调用Captcha类的方法:

require_once 'captcha.php';

if(empty($_POST['genCaptcha'])){
    return;
}

if(isset( $_POST['genCaptcha'] )) {
    $captcha = new Captcha();
    $result = $captcha->getCaptcha();
}

echo $result;

最后这是我的html和jquery代码,它会向handler.php文件发送ajax请求

<?php

    require_once 'captcha.php';
    require_once 'handler.php';

?>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.2.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.2.min.js"></script>
</head>
<body>
    <p><img id="captchaImg" src="" width="120" height="30" border="1" alt="CAPTCHA"></p>
    <button id="genCaptcha" type="button">Generate Captcha</button>
</body>

<script type="text/javascript">
    $(function() {
        $('#genCaptcha').on('click', function() {
            $.ajax({
                method: "POST",
                url:"handler.php",
                data: {genCaptcha:'1'},
                success: function(data){
                    var base64Image = data.image;
                    $('#captchaImg').attr('src','data:image...'+base64Image);
                },
                error: function (req, status, err) {
                    console.log('Something went wrong', status, err);
                }
            });
        });

    });
</script>
</html>

但我只是在我的ajax成功回调中获得undefined结果

感谢任何可以帮助我的人!

1 个答案:

答案 0 :(得分:0)

由于您将参数传递到__constructor(),因此在创建新class时必须传递这些参数。只需从构造函数中删除参数,它就可以工作。

//if you have this
__construct($image, $background, $linecolor, $textcolor)
//class should be called like this
$captcha = new Captcha($image,$background,$linecolor,$textcolor);

//change it to this
__construct()
//since you call it like this
$captcha = new Captcha();