jquery無回應(驗證碼刷新)

edited 三月 2014 in Javascript
請問各位大大,我在做驗證碼刷新時使用jquery,但是下面這段程式碼一直不能刷新,當點下id為change時id是code的圖片會刷新網址應該沒錯吧...,不知道錯在哪!!求指點 謝謝~~
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title></title>
<script type=\"text/javascript\">
$(function(){
//刷新
$(\"#change\").click(function(){
$(\"#code\").attr(\"src\",'code.php?' + Math.random());
});
});
</script>
</head>

<body>
<font size=\"5\">會議室預約系統</font><p/>
<form name=\"form1\" action=\"login_process.php\" method=\"post\">
帳號:<input type=\"text\" name=\"user\"><br>
密碼:<input type=\"password\" name=\"pwd\"><br>
認證碼圖片:<img id=\"code\" src=\"code.php\">&nbsp;&nbsp;<input type=\"button\" value=\"重新產生\" id=\"change\" ><br/>
認證碼回答:<input type=\"text\" name=\"code\"><br>
<input type=\"submit\" value=\"送出\"><input type=\"button\" onclick=\"javascript:location.href='forgot.php'\" value=\"忘記密碼\">
</form>

</body>

評論

  • 加入load ,確認是否有真正取到圖

    $('#code').attr('src', 'code.php?' + Math.random()).load(function() { alert('Image Loaded'); });
  • 以你那段jQuery的code看起來, 似乎是沒有讓php產生新的圖片及更新session值,
    你試看看寫一隻show.php 去顯示你的驗證碼的session['code']

    1. 第一次讀取主頁面時, 假設產生圖片[1234]及session['code']='1234'
    2. 打開show.php echo session['code'] 會顯示1234
    3. 接著在主頁面點擊 [ 重新產生 ]
    4. 重新整理show.php 看看session['code']的值有沒有改變
  • 我後來試試看在登入那個頁面 echo $SESSION['code']值 顯示的數字卻是上一張圖片的字,就是圖片跟session值不同,但是我再新增一個show.php 來echo session值,出現的數字跟圖片號碼卻相同,以下是我寫的code.php的程式碼
    <?php 
    $im=imagecreate(60,60);
    $bgc=imagecolorallocate($im,0,0,255);
    $wdc=imagecolorallocate($im,255,0,0);
    $word=rand(0,9);
    imagefill($im,0,0,$bgc);
    imagestring($im,12,10,10,$word,$wdc);
    ob_clean();
    header(\"Content-Type: image/png\");
    imagepng($im);
    imagedestroy($im);
    $_SESSION['code']=$word;
    ?>

    不知道會不會跟ob_clean()有關,但是沒這段函數,我的圖片會顯示不出來。我剛剛有試過在jquery那段後面加上load(function() { alert('Image Loaded');執行時卻沒alert出來。 麻煩各位了!!
  • 我打清楚一點好了,這個是登入頁面 login.php,在這邊echo session會慢圖片一張,圖片這次顯示4,我session值下次才會顯示4,但是我在show.php 一樣echo session值,圖片跟session值是一樣的
    <head>
    <?php session_start(); ?>
    <meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=utf-8\\" />
    <title></title>
    <script type=\\"text/javascript\\">
    $(function(){
    //刷新
    $(\\"#change\\").click(function(){
    $(\\"#code\\").attr(\\"src\\",'code.php?' + Math.random());
    });
    });
    </script>
    </head>

    <body>
    <font size=\\"5\\">會議室預約系統</font><p/>
    <form name=\\"form1\\" action=\\"login_process.php\\" method=\\"post\\">
    帳號:<input type=\\"text\\" name=\\"user\\"><br>
    密碼:<input type=\\"password\\" name=\\"pwd\\"><br>
    認證碼圖片:<img id=\\"code\\" src=\\"code.php\\">&nbsp;&nbsp;<input type=\\"button\\" value=\\"重新產生\\" id=\\"change\\" ><br/>
    認證碼回答:<input type=\\"text\\" name=\\"code\\"><br>
    <input type=\\"submit\\" value=\\"送出\\"><input type=\\"button\\" onclick=\\"javascript:location.href='forgot.php'\\" value=\\"忘記密碼\\">
    </form>
    </body>

    這個是 code.php
    <?php 
    session_start();
    $im=imagecreate(60,60);
    $bgc=imagecolorallocate($im,0,0,255);
    $wdc=imagecolorallocate($im,255,0,0);
    $word=rand(0,9);
    imagefill($im,0,0,$bgc);
    imagestring($im,12,10,10,$word,$wdc);
    ob_clean();
    header(\\"Content-Type: image/png\\");
    imagepng($im);
    imagedestroy($im);
    $_SESSION['code']=$word;
    ?>
  • 沒有alert ,表示沒取到圖,那麼原因可能是
    1.圖沒生成,ob_clean() 我記得是輸出到 html 時用,看code 你圖沒生一半就吐給html了.把ob_clean() code.php , 放到最下方或session_start()下方看看(生圖前後).
    2.$(\\"#code\\").attr(\\"src\\",'code.php?' + Math.random()); 這句之前有文法錯誤,看cdoe
    Math.random()是來亂的,或前面有錯,驗證方法前後alert
    3.傳圖失敗,juqary lib 引用錯誤
    4.session_start() 前有空白,session沒起來
  • 謝謝你的回答,找到解決方法了
    $(function(){
    //刷新
    $(\\"#change\\").click(function(){
    $(\\"#code\\").attr(\\"src\\",'code.php?' + Math.random());
    });
    });

    我把上面這段改成下面這段就可以了..

    function getVCode() {
    var vcode=document.getElementById('code');
    vcode.src = 'code.php?nocache='+new Date().getTime();
    }

    另外想請問一下,imagepng有沒有辦法一次輸出多張png檔,我沒有要讓他4個字出現在一張圖,我想要讓每個字都一張圖片,所以要產生四張,那我該怎麼做,迴圈好像無效...,不知道問題再哪!! 謝謝
  • 是不建議這麼做,不過要做也是可以
    提供一個簡單的思路是分N次ajax 新圖 ,該php 每次只生成一數字圖,取回後插回對應的div
    ,但要做到ajax 等待與jquary 的 依次處理.
Sign In or Register to comment.