프로그램에서 특정 입력 필드에서 타이핑을 치기 시작할 때 한번만 ajax 호출하는 방법입니다.
$("#userName").one("keyup", function(e) { 보시는 것처럼 one을 넣어서 keyup 이벤트를 인식하게 되면
그 다음에는 인식을 하지 않도록 하게 합니다.
아래 보시는 소스는 이름 입력 필드에 사용자가 키보드를 눌렀을 때
ajax를 이용하여 비동기식으로 관련된 백그라운드 프로그램을 가동 시키게 하고
가동 완료 후 세션 아이디값을 받아와서 Form hidden으로 추가를 하여 정상 가동을 체크하도록 만든 것입니다.
백그라운드 프로그램을 가동하는 동안 사용자는 다른 필드에서 입력값을 넣게 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="">
<input type="text" name="userName" id="userName" />
<input type="submit" />
</form>
<script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>
<script>
// 이름 입력 Field에 입력 시작 시 서비스 시작 호출
// 성공한 데이터는 input 값에 셋팅을 함
$("#userName").one("keyup", function(e) {
// 서비스 시작 호출
$.ajax({
url:'서비스 시작 결과 데이터를 가져올 주소',
dataType:'json',
success:function(data)
{
var message = data.message;
if ( message == 'Success' )
{
$("input[name='session_id']").remove();
$("<input></input>").attr({type:"hidden", name:"session_id", value:data.session_id}).appendTo($('form'));
}
else {
//console.log(message);
}
}
})
});
</script>
</body>
</html>
2020/01/13 - [유용한 활용팁] - Javascript ajax setTimeout를 이용하여 3분 간격 세션 자동 연장 처리
2020/01/10 - [유용한 활용팁] - Javascript Jquery 브라우저 종료시 로그아웃 처리하기 - beforeunload
2019/12/24 - [유용한 활용팁] - JavaScript 원하는 영역에 대해서만 출력 화면 설정하기 - window.print()
2019/12/21 - [유용한 활용팁] - JavaScript ajax jquery $.post를 이용하여 form 데이터 구성 없이 post로 데이터 전송 처리
2019/11/15 - [유용한 활용팁] - JavaScript 구분자로 배열 만들기, 타입 변경하기(String, Number)
2019/11/07 - [유용한 활용팁] - JavaScript(자바스크립트), Jquery를 이용하여 이미지 바뀌게(토글, toggle) 하는 방법 - replace 활용
2019/10/29 - [유용한 활용팁] - JavaScript Input 생년월일 유효성 검사하기 - isBirthDay, 2월 29일 윤년 계산
2019/10/23 - [유용한 활용팁] - JavaScript Input 날짜 체크, Date 만들기 - isDate, getDate, calcDate
'유용한 활용팁' 카테고리의 다른 글
HTML form input 크롬 autocomplete 자동완성 삭제 처리 (0) | 2020.01.17 |
---|---|
Javascript Jquery UI datepicker 한글화 하기 - datepicker-ko (0) | 2020.01.16 |
Javascript ajax setTimeout를 이용하여 3분 간격 세션 자동 연장 처리 (0) | 2020.01.13 |
Javascript Jquery 브라우저 종료시 로그아웃 처리하기 - beforeunload (0) | 2020.01.10 |
파이썬 줄 바꿈 처리 3가지 방법 (2) | 2020.01.07 |