반응형
JQuery
AJAX(Asynchronous JavaScript and XML)
- jQuery Ajax는 JavaScript 라이브러리인 jQuery의 일부 기능으로, 비동기적으로 서버와 데이터를 주고받을 수 있도록 도와줌
- 웹 페이지에서 비동기적으로 데이터를 로드하고 웹 페이지를 업데이트하는 데 사용
- jQuery Ajax는 Ajax를 보다 쉽게 사용할 수 있도록 jQuery 라이브러리를 사용하여 작성된 메서드와 함수
- jQuery Ajax를 사용하면 HTTP 요청을 쉽게 만들고 보내고, 응답을 처리하고, 웹 페이지를 업데이트하는 방법을 보다 쉽게 구현가능
jQuery Ajax를 사용하면 페이지 전체를 새로 고치지 않고도 동적으로 데이터를 가져와 사용자 경험을 향상시킬 수 있습니다. 이를 통해 웹 페이지의 속도와 효율성을 높이고, 서버에서 불필요한 트래픽을 줄일 수 있습니다.
ajax()에서 필요한 속성
url : 요청할 페이지의 위치
method : 요청방식 (get/post)
data : 요청할 페이지에 전송할 데이터
dataType : 응답 받을 데이터의 타입 정의(json/xml/html 등)
async : 자바스크립트 코드를 비동기로 실행할지 여부 정의(true/false) , 페이지자체는 비동기이지만 내부코드는 동기로 실행
- false 동기 : 어떠한 순서없이 실행
- true 비동기 : 진행중인 작업이 끝나야 실행가능
success : 서버통신에 성공했다면 함수(기능)를 실행 //넘어오는 데이터를 파라미터로 받는다
error : 서버통신에 실패했을 때 함수(기능)을 실행 //request, error를 파라미터로 받아서 request.status 와 error로 오류확인가능
- 404error는 찾을수가 없는상태
get방식
<a href =test.html?id=a&addr=영등포구'>
코드
<body>
<h1>사원정보조회하기(1명에 대한 정보)</h1>
<fieldset>
<legend>사원정보조회</legend>
<label>사원번호:</label><input type="text" name="empId"/>
<input type="button" value="조회" id="emp_search" />
</fieldset>
<form>
<table>
<tr>
<td>사원번호</td>
<td><input type="text" name="empNum" readonly="readonly" /></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" name="lastName" readonly="readonly" /></td>
</tr>
<tr>
<td>이메일</td>
<td><input type="text" name="email" readonly="readonly" /></td>
</tr>
<tr>
<td>전화번호</td>
<td><input type="text" name="phone" readonly="readonly" /></td>
</tr>
<tr>
<td>입사일</td>
<td><input type="text" name="hire" readonly="readonly" /></td>
</tr>
</table>
</form>
</body>JQuery를 통해 xml데이터를 불러오는 코드
$(function(){
$("#emp_search").click(function(){
var empId=$("input[name=empId]").val();
$.ajax({
url:"emplist.xml",
method:"get",
async:false,
dataType:"xml",
data:{"empId":"105"}, // 또는 {"empId":105,"addr":"영등포"}
//성공시
success : function(data){
//json:data.test.empId
var obj=$(data);//data: XML객체-> jquery로 변환
console.log(obj.find("ROW").length);
console.log(obj.find("ROW").eq(0).find("EMAIL").text());
var empRow=null;
obj.find("EMPLOYEE_ID").each(function(){
if($(this).text()==empId){
empRow=$(this).parent()//ROW객체[id, name,phone,hiredate]
//$("table input").eq(i).val(row.children("EMPLOYEE_ID").text());
return;
}
});
//구한 empRow로 탐색후 반복문으로 모든 경우 input의 val에 넣어주면됨
//숫자,문자
//결과가 없을 경우 알려주기 -> "검색결과가 없습니다"
if(empRow==null){
//숫자, 문자, 공백
if($.isNumeric(empId)){
alert("입력한"+parseInt(empId)+ "는 범위내에 없음");
}
else if(empId==""){
alert("값을 입력");
}
else{
alert("문자 입력 불가");
}
}
else{//정상
$("table input").each(function(i){
$(this).val(empRow.children().eq(i).text());//this는 each로 탐색하는input요소
});
}
},
error: function(request,error){
alert("통신실패");
}
});
});
});기타참고
- each( JQuery) : for문을 대체하는 함수***
- contains
- jq에서 input태그의 값을 가져 올 때 : val()
- xml를 jquery로 사용하려면 jquery와 같은 형태 : $()로 형식을 맞춰줘야한다.
반응형
'Front-end > JQuery' 카테고리의 다른 글
| (JQuery)DOM처리 메서드 (0) | 2023.03.08 |
|---|---|
| (JQuery)DOM탐색 메서드 연습문제 (0) | 2023.03.07 |
| (JQuery)이벤트 전파, 기본기능 금지 메서드 (0) | 2023.03.06 |
| (JQuery)DOM탐색 메서드 (0) | 2023.03.06 |
| (JQuery)셀렉터 표현식 (0) | 2023.03.06 |