jQuery_jquery를 기반으로 사용자 이름이 존재하는지 확인하기 위해 Ajax 구현

본 글에서는 사용자 이름이 존재하는지 확인하기 위해 jQuery 기반의 Ajax 구현 코드를 공유합니다.

jQuery.ajax 개요

원격 데이터를 로드하기 위한 HTTP 요청입니다.

AJAX 기반 jQuery로 구현되었습니다. 간단하고 사용하기 쉬운 상위 수준 구현을 보려면 $.get, $.post 등을 참조하세요. $.ajax()는 생성된 XMLHttpRequest 객체를 반환합니다. 대부분의 경우 이 개체를 직접 조작할 필요는 없지만 특별한 경우에는 요청을 수동으로 종료하는 데 사용할 수 있습니다.

$.ajax()에는 각 구성 및 콜백 함수 정보를 포함하는 매개변수 키/값 객체라는 하나의 매개변수만 있습니다. 아래의 자세한 매개변수 옵션을 참조하세요.
참고: dataType 옵션을 지정하는 경우 서버가 올바른 MIME 정보를 반환하는지 확인하세요(예: xml은 "text/xml"을 반환함). 잘못된 MIME 유형은 예측할 수 없는 오류를 일으킬 수 있습니다.

참고: dataType이 "script"로 설정된 경우 원격 요청 중에(동일한 도메인에 속하지 않음) 모든 POST 요청이 GET 요청으로 변환됩니다. (DOM 스크립트 태그를 사용하여 로드하기 때문입니다)
jQuery 1.2에서는 도메인 간에 JSON 데이터를 로드할 수 있으며, 이를 사용할 때는 데이터 유형을 JSONP로 설정해야 합니다. "myurl?callback=?"과 같은 JSONP 형식을 사용하여 함수를 호출하면 jQuery는 콜백 함수를 실행하기 위해 자동으로 ?를 올바른 함수 이름으로 바꿉니다. 데이터 유형이 "jsonp"로 설정되면 jQuery는 자동으로 콜백 함수를 호출합니다.

매개변수 목록:

여기에는 beforeSend, 성공, 완료, 오류 등 여러 Ajax 이벤트 매개변수가 있습니다. 각 Ajax 요청을 잘 처리하도록 이러한 이벤트를 정의할 수 있습니다. 이러한 Ajax 이벤트에서 이는 모두 Ajax 요청의 옵션 정보를 가리킨다는 점에 유의하십시오(get() 메소드에 대해 설명할 때 이 그림을 참조하십시오).
Ajax 개발에 jQuery를 사용하려면 위의 매개변수 목록을 주의 깊게 읽어보세요.
예:

1. AJax.aspx 요청 페이지

HTML 코드

<div> 
<input id="txtName" type="text" /><input type="button" value="查看用户名是否存在" id="btn" onclick="JudgeUserName();" /> 
<div id="showResult" style="float:left">div> 
div> 

JS 코드

<script type="text/javascript" src="CSS/jquery-1.3.2.js"></script> 
<script type="text/javascript"> 
function JudgeUserName() 
{ 
$.ajax({ 
type:"GET", 
url:"AjaxUserInfoModify.aspx", 
dataType:"html", 
data:"userName="+$("#txtName").val(), 
beforeSend:function(XMLHttpRequest) 
{ 
$("#showResult").text("正在查询"); 
//Pause(this,100000); 
}, 
success:function(msg) 
{ 
$("#showResult").html(msg); 
$("#showResult").css("color","red"); 
}, 
complete:function(XMLHttpRequest,textStatus) 
{ 
//隐藏正在查询图片 
}, 
error:function() 
{ 
//错误处理 
} 
}); 
} 
</script> 

2, 페이지 AjaxUserInfoModify.aspx

백엔드 코드

protected void Page_Load(object sender, EventArgs e) 
{ 
string userName = Request.QueryString["userName"].ToString (); 
if (userName == "James Hao") 
{ 
Response.Write ("用户名已经存在！"); 
} 
else 
{ 
Response.Write ("您可以使用此用户名！"); 
} 
} 

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.