ajax 리 셋 없 음 인증 등록 정보 예제
1.등 록 된 html 페이지 를 만 듭 니 다(html+css)
1.form 폼 필요 없 이 div 로 싸 기
2.정확 하고 잘못된 정 보 를 표시 하려 면 네 개의 탭 이 필요 합 니 다.
3.submit 제출 버튼 없 이 button
그림:
2.ajax 를 함수 로 만 들 고 간단 한 매개 변 수 를 통 해 서버 와 데이터 교환 을 할 수 있 습 니 다.
1.이 ajax 함수 앞 에 ajax 처 리 를 이용 하여 데 이 터 를 되 돌려 주 는 글 이 있 습 니 다.
2.ajax 함 수 는 세 개의 인자,url,jsonData,getMsg 가 필요 합 니 다.여기 url 은 모두 regProcess.php 이 고 jsonData 는 서버 에 검 증 된 데 이 터 를 전달 합 니 다.getMsg 는 되 돌아 오 는 데 이 터 를 가 져 오 는 함수 입 니 다.
3.두 번 째 단 계 를 반복 하면 네 가지 정 보 를 검증 할 수 있다.
3.등록 정 보 를 처리 하 는 regProcess.php 파일 을 만 듭 니 다.
1.이것 은 바로 ajax 가 보 내 온 데 이 터 를 처리 하 는 것 입 니 다.발송 방식 이 POST 이 므 로 수신 방식 도 POST 입 니 다.
2.데 이 터 를 모두 받 은 후에 검증 하고 판단 한다.가장 중요 한 것 은 데 이 터 를 성공 적 으로 받 아들 일 수 있 는 지,절대 데 이 터 를 잘못 받 아 서 는 안 된다.
여기 서 주의해 야 할 것 은 일부 특수 문자 가 서버 에 전 달 될 때 정확 하지 않 게 표 시 됩 니 다.예 를 들 어'+'는'빈 칸'으로 표 시 됩 니 다.자세 한 정 보 는 스스로 검색 하 십시오.따라서 서버 가 받 을 때 특수 문자 가 전 달 될 경우 인 코딩 을 해 야.php 는 urlencode 라 는 함 수 를 사용 하여 url 인 코딩 을 할 수 있 습 니 다.
4.필요 한 기능 을 함수 로 작성 하여 다른 my Func.phop 파일 에 넣 고 regProcess.phop 파일 을 가 져 와 직접 사용 합 니 다.
1.사용자 이름 이 불법 인지,등 록 했 는 지 확인
2.비밀번호 가 불법 인지,강도 가 얼마나 되 는 지 검증
3.비밀번호 입력 일치 여부 확인
4.메 일이 불법 인지,등 록 했 는 지 확인
5.사용자 정 보 를 데이터베이스 에 저장
그리고 regProcess.php 에서 이 함 수 를 사용 하여 되 돌아 오 는 오류 코드 를 직접 처리 하면 됩 니 다.
5.처 리 된 데 이 터 를 되 돌려 줍 니 다.여 기 는 문자열 의 json 형식 으로 되 돌려 주 고 JS 로 해석 하 겠 습 니 다.
1.돌아 온 데 이 터 는 json 형식 으로 연결 해 야 합 니 다.
json 형식:{name 1:value 1,name 2:value 2};
그러나 우리 가 되 돌려 야 할 것 은 실제 문자열 이기 때문에 이렇게 해 야 합 니 다.{"name 1":"value 1","name 2":"value 2"}";
2.전단 으로 돌아 간 후 JS 의 eval 함수 로 json 대상 으로 해석 합 니 다.
예 를 들 어 var json=eval('+oAjax.responseText+')');
3.검 증 된 정 보 를 대응 하 는 input 뒤에 표시 합 니 다.
4.등록 을 클릭 하여 모든 데 이 터 를 한꺼번에 제출 하고 오류 가 없 으 면 가입 사용자 정 보 를 유지 하 며 등록 성공 을 알 립 니 다.
등록 성공 효 과 는 다음 그림 과 같 습 니 다:
데이터베이스 도 방금 등 록 된 정 보 를 갱신 하 였 다.
등록 실패 효 과 는 다음 그림 과 같 습 니 다:
다음은 주요 코드 입 니 다.
html 코드
<div id="reg">
<label> :<input type="text" id="username" /></label><label></label><br /><br />
<label> :<input type="password" id="passw" /></label><br /><br />
<label> :<input type="password" id="repassw" /></label><br /><br />
<label> :<input type="text" id="email" /></label><br /><br />
<button id="btn"> </button>
<span id="user"></span>
<span id="pass"></span>
<span id="rep"></span>
<span id="em"></span>
</div>
css 코드
#reg{width:400px;height: 300px;position: relative;margin:10px auto}
#reg label{float:right;position: relative;margin-top: 10px;font-size: 28px;}
#reg label input{width:250px;height: 40px;font-size: 24px;}
#reg #btn{width:120px;height: 40px;position: absolute;right: 65px;margin-top: 80px;}
#reg span{width:200px;position: absolute;right: -210px;font-size: 24px;}
#reg #user{top:20px;}
#reg #pass{top:75px;}
#reg #rep{top:130px;}
#reg #em{top:185px;}
.error{color:red;}
.ok{color:greenyellow;}
js 코드
<script src="../../../ajax.js"></script>
<script>
window.onload = function ()
{
//
bgProcess();
// ,
$('btn').onclick = function ()
{
var jsonData = {username:$('username').value,passw:$('passw').value,
repassw:$('repassw').value,email:$('email').value};
ajax('regProccess.php',jsonData,getInfo,'json');
};
function getInfo(info)
{
var a = ['username','passw','repassw','email'];
var b = ['user','pass','rep','em'];
var flag = true;
for(var i =0;i<info.length;i++)
{
if(info[i].state == 'false')
{
flag = false;
displayInfo(info[i],b[i],a[i]); //
}
}
if(flag) alert(' ');
}
};
//
function bgProcess()
{
//
$('username').onblur = function ()
{
var jsonData = {username:this.value};
ajax('regProccess.php',jsonData,getUser,'json');
};
function getUser(msg)
{
displayInfo(msg[0],'user','username');
}
//
$('passw').onkeyup = $('passw').onblur= function ()
{
var jsonData = {passw:this.value};
ajax('regProccess.php',jsonData,getPass,'json');
};
function getPass(msg)
{
displayInfo(msg[1],'pass','passw');
}
//
$('repassw').onblur = function ()
{
var jsonData = {passw:$('passw').value,repassw:this.value};
ajax('regProccess.php',jsonData,getRepass,'json');
};
function getRepass(msg)
{
displayInfo(msg[2],'rep','repassw');
}
//
$('email').onblur= function ()
{
var jsonData = {email:this.value};
ajax('regProccess.php',jsonData,getEmail,'json');
};
function getEmail(msg)
{
displayInfo(msg[3],'em','email');
}
}
//
function displayInfo(msg,id,name)
{
$(id).className = (msg.state == 'true')?'ok':'error';
$(id).innerHTML = msg[name];
}
function $(id)
{
return document.getElementById(id);
}
</script>
myFunc.php 코드:
<?php
/**
* @function
* @param $username
* @return $res , ,1: ,1: ,1:
*/
function verifyUser($username)
{
$res = array();
// ,0 , 、 、
if(preg_match("/^\\w{6,16}$/",$username) == 0)
$res[] = 1;
else
$res[] = 0;
if(empty($username))
$res[] = 1;
else
$res[] = 0;
if(verifyData($username,' ')) //
$res[] = 1;
else
$res[] = 0;
return $res;
}
/**
* @function
* @param $passw
* @return $res
*/
function verifyPassw($passw)
{
$reg1 = '/^[0-9]{8,16}$/'; //
$reg2 = '/^[a-zA-Z]{8,16}$/';//
$reg3 = '/^[a-zA-Z\+]{8,16}$/';// +
$reg4 = '/^[0-9a-zA-Z]{8,16}$/';//
$reg5 = '/^[0-9a-zA-Z\+]{8,16}$/';// 、'+‘
$res;
if(empty($passw))
$res = -1;
else if(preg_match($reg1,$passw))
$res = 1;
else if(preg_match($reg2,$passw))
$res = 1;
else if(preg_match($reg3,$passw))
$res = 2;
else if(preg_match($reg4,$passw))
$res = 2;
else if(preg_match($reg5,$passw))
$res = 3;
else
$res = 0; //
return $res;
}
/**
* @function
* @param $email
* @return $res
*/
function verifyEmail($email)
{
$reg = '/^([\w-*\.*])+@(\w-?)+(\.\w{2,})+$/';
$res;
if(empty($email))
$res = -1;
else if(verifyData($email,' '))
$res = 1;
else if(preg_match($reg,$email))
$res = 2;
else
$res = 0; //
return $res;
}
/**
* @function data
* @param $data
* @param $query
* @return data 1, 0
*/
function verifyData($data,$query)
{
//1.
@$db = new MySQLi('localhost','root','root','user_passd');
if(mysqli_connect_errno())
die(" ");
//2.
$sql = "select $query from login where $query = '{$data}'";
$res = $db->query($sql);
$row = $res->fetch_assoc();
//3.
$db->close();
return is_null($row)?0:1;
}
/**
* @function
* @param $data ,
* @return bool $res true ,false
*/
function saveRegInfo($data)
{
//1.
@$db = new MySQLi('localhost','root','root','user_passd');
if(mysqli_connect_errno())
die(" ");
//2.
$sql = "insert into login values('{$data[0]}','{$data[1]}','{$data[2]}')";
$res = $db->query($sql);
//3.
$db->close();
return $res;
}
regProcess.php 코드
<?php
header("Content-Type:text/html;charset=utf-8");
// , ,
header("Cache-Control:no-cache");
include('myFunc.php'); //
$username = isset($_POST['username'])?$_POST['username']:''; //
$passw =isset($_POST['passw'])?urlencode($_POST['passw']):''; //
$repassw = isset($_POST['repassw'])?urlencode($_POST['repassw']):''; //
$email = isset($_POST['email'])?$_POST['email']:''; //
$info='['; //
$isSucceed = 0; // , 4, ,
//1.
$res1 = verifyUser($username);
if($res1[1])
$info.='{"username":" ","state":"false"}';
else if($res1[0])
$info.='{"username":" ","state":"false"}';
else if($res1[2])
$info.='{"username":" ","state":"false"}';
else
{
$info.='{"username":" ","state":"true"}';
++$isSucceed;
}
$info.=',';
//2.
$res2 = verifyPassw($passw);
if($res2 == -1)
$info.='{"passw":" ","state":"false"}';
else if($res2 == 0)
$info.='{"passw":" ","state":"false"}';
else
{
if($res2 == 1)
$info.='{"passw":" ","state":"true"}';
else if($res2 == 2)
$info.='{"passw":" ","state":"true"}';
else if($res2 == 3)
$info.='{"passw":" ","state":"true"}';
++$isSucceed;
}
$info.=',';
//3.
if(empty($repassw))
$info.='{"repassw":" ","state":"false"}';
else if($passw == $repassw)
{
$info.='{"repassw":" ","state":"true"}';
++$isSucceed;
}
else
$info.='{"repassw":" ","state":"false"}';
$info.=',';
//4.
$res3 = verifyEmail($email);
if($res3 == -1)
$info.='{"email":" ","state":"false"}';
else if($res3 == 0)
$info.='{"email":" ","state":"false"}';
else if($res3 == 1)
$info.='{"email":" ","state":"false"}';
else if($res3 == 2)
{
$info.='{"email":" ","state":"true"}';
++$isSucceed;
}
//
if($isSucceed == 4)
saveRegInfo(array($username,$passw,$email));
echo $info.=']';
이 예 는 간단 하지만 초보 자 에 게 전단 이 어떻게 백 엔 드 에 데 이 터 를 전달 하 는 지,백 엔 드 가 어떻게 데 이 터 를 전단 에 되 돌려 주 는 지 대충 알 게 해 줄 수 있 습 니 다.이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Javascript Ajax에 대한 간단한 연습저는 약 4년 동안 프로그래밍 개인 튜터로 일한 경험이 있습니다. 약 5년 전에 " "이라는 제목의 페르시아어로 내 웹사이트에 블로그 게시물을 올렸고 사람들이 저에게 전화하기 시작했습니다. 나는 항상 사람들을 가르치...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.