phpとajaxは簡単なログイン機能を実現

19330 ワード

バックグラウンド開発 ajax php 認証コード

一、検証コードの生成
captcha.php:

$image=imagecreatetruecolor(100, 30);
$bgcolor=imagecolorallocate($image, 255, 255, 255);//       ,     
imagefill($image, 0, 0, $bgcolor);//    ，    （x，y）         bgcolor
$captch_code='';//        
for($i=0;$i<4;$i++){
    $fontsize=1500;//     6px
    $fontcolor=imagecolorallocate($image, rand(0,120),rand(0,120),rand(0,120));
    $data='3456789qwertyuipkjhgfdsaxcvbnmQWERTYUIPLKJHGFDSAXCVBNM';//        
    $fontcontent=substr($data, rand(0,strlen($data)),1);//  0              
    $captch_code.=$fontcontent;//            
    $x=rand(5,10)+($i*100/4);
    $y=rand(5,10);
    imagestring($image, $fontsize, $x, $y, $fontcontent, $fontcolor);
}
for($i=0;$i<200;$i++){
    $pointcolor=imagecolorallocate($image, rand(50,200),rand(50,200), rand(50,200));
    imagesetpixel($image, rand(1,99), rand(1,29), $pointcolor);//              ，      
}
for($i=0;$i<3;$i++){
    $linecolor=imagecolorallocate($image, rand(80,220), rand(80,220), rand(80,220));
    imageline($image, rand(1,99), rand(1,29), rand(1,99), rand(1,29), $linecolor);//             
}
$_SESSION['authcode']=strtolower($captch_code);//          session   
header('content-type:image/png');
imagepng($image);
imagedestroy($image);
?>

二、htmlページ
login.html:


<html>
<head>
<meta charset="UTF-8" />
<script src="http://apps.bdimg.com/libs/jquery/1.2.3/jquery.min.js">script>
<script src="login.js">script>
head>
<body>
<div style="margin: 0 auto;">
<form class="login">
    <table>
        <tr>
            <td>  ：td>
            <td><input type="text" name="username" id='username' maxlength="12" onload="this.focus();"/>td>
        tr>
        <tr>
            <td>  ：td>
            <td><input type="password" name="password" id='password' maxlength="12" />td>
        tr>
        <tr>
            <td>   ：td>
            <td>
                <input type="text" name="ver_code" id="ver_code" maxLength="4" />
                <img id="captcha_img"　border="1" src="captcha.php?r=" width="80" height="35" />
                <a href="javascript:void(0)" onclick="document.getElementById('captcha_img').src='captcha.php?r='+Math.random()"><span>   ？   ！span>a>
            td>
        tr>
        <tr>
            <td><input type="submit" id="submit" name="submitreg" value="  " onclick="return login()"/>td>
            tr>               
    table>
form>
div>
body>
html>

三、バックグラウンド実現
config.inc.php:


$server="localhost";//mysql     
$user="root";//  mysql    
$pass="";//  mysql   
$db_name="final";//mysql         
$hd=@mysql_connect($server,$user,$pass) or die("  ，    ");
$db=mysql_select_db($db_name,$hd);
mysql_query("SET names 'utf8'");
?>


session_start();

require_once "config.inc.php";

$username = $_POST['username'];
$password = $_POST['password'];
$ver_code=$_POST['ver_code'];
//     
if (strtolower($ver_code)==$_SESSION['authcode']){
    $check_st="select * from user  where name='$username'";
    $re_st=mysql_query($check_st);
    $co=mysql_fetch_array($re_st);
    if ($co){
     //        
        if ($password==$co['password']){
            $_SESSION['user']=$username;
            $data=array("status"=>"    ！");
        }else{
            $data=array("status"=>"    ！");
        }
    }else{
        $data=array("status"=>"     ！");
    }
}else{
    $data=array("status"=>"     ！");
}
echo json_encode($data);

四、js
login.js:

function login() {
    var username = document.getElementById('username');
    var password = document.getElementById('password');
    var ver_code = document.getElementById('ver_code');
    if (username.value == "") {
        alert("       ，     。");
        password.value = "";
        username.focus();
        username.select();
    } else if (password.value == "") {
        alert("      ，     。");
        password.focus();
        password.select();
    } else if (ver_code.value == "") {
        alert("       ，     。");
        ver_code.focus();
        ver_code.select();
    } else {
        $.ajax({
            type:'post',
            url:'login.php',
            data:{
                username:username.value,
                password:password.value,
                ver_code:ver_code.value
            },
            dataType:'json',
            success:function(data){
                if(data.status!="    ！"){
                    alert(data.status);
                    location=location;
                }else{
                    alert(data.status);
                    //      
                    //location='home.html';
                }
            }
        });
    }
    return false;
}

Twitterに自動投稿できる文字数について。（URLは長さに関係なく23文字！）

Web版Twitterでリストが見れない問題