[JQuery Ajax] 초간단 아작스 아이디 검사

알고 넘어가기

$('#foo').val('this is some example text');// <input type="textbox" name="foo" /> 텍스트박스에 값 바인딩

$("#idCheckResultView").html("<b>사용가능!</b>"); // <span id="idCheckResultView"/> 태그에 값 입력하기

시작하기

아래의 중복확인을 누르면 바로 아이디 검사가 가능하다

우선 Jquery 스크립트를 페이지에 삽입한다.

<script src="Js/jquery-1.4.4.min.js"></script>

다운로드 http://jquery.com/

<input name="member_id" type="text" class="search" id="member_id" style="width:116px;height:18px;border:solid 1px #908daa"  onKeyUp="ResutCheckID()"/> 
</span></td>
<td width="64">

<img src="images/member_btn_03.gif" width="64" height="20" border="0" style="cursor:hand" onClick="CheckID()">
&nbsp;&nbsp;<span class="style4" id="idCheckResultView"> <—결과를 보여주는 Tag

아래의 페이지(/members/login_wk/AjaxLoginCheck.asp)는 True False 를 문자열로 반환한다.(실질적으로 아이디 사용유무검사)

 중복확인 버튼을 누르면 CheckID 호출

var id = $("#member_id").val() ; //인풋박스의 값을 가지고 온다.
type 은 GET/ POST 보내는 형식을 지정한다.
url: "/members/login_wk/AjaxLoginCheck.asp", //검사할 페이지
msg는 AjaxLoginCheck.asp 의 페이지값을 받아온다.

success: function(msg){
     alert( "Data Saved: " + msg );
   }

-----------------------------------------------------
var IsUseID = false; //검사확인 되면 상태값 변경

Function CheckID()
{
var id = $("#member_id").val() ;
$.ajax({
   type: "POST",
   url: "/members/login_wk/AjaxLoginCheck.asp",
   data: "member_id="+id,
   success: function(msg){
     if( msg =="true") //사용가능
     {
        alert("사용가능");
        $("#idCheckResultView").html("<b>사용가능!</b>");
     }else
     {
         ResutCheckID();
     }
   }
});
}

//다시검사
function ResutCheckID()
{
IsUseID = false; //아이디가 확인되었는데 또 입력하면 확인실패로 변경
$("#idCheckResultView").html("");
}

AjaxLoginCheck.asp 보면 true /false만 페이지에 찍고 있다.

 

 

참고 URL  : http://api.jquery.com/jQuery.ajax/