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

    1. 第一次讀取主頁面時, 假設產生圖片[1234]及session='1234'
    2. 打開show.php echo session 會顯示1234
    3. 接著在主頁面點擊 [ 重新產生 ]
    4. 重新整理show.php 看看session的值有沒有改變
  • 我後來試試看在登入那個頁面 echo $SESSION值 顯示的數字卻是上一張圖片的字,就是圖片跟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.