알고 넘어가기
$(
'#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()">
<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/