[9] JavaScript & JQuery - ajax로 특정 데이터 검색

[ 환경 ]
ㄴ php 7 
ㄴ JQuery 1.11.1

Q. select박스의 회원을 선택시 해당 회원의 정보가 나타나도록 하고싶습니다.

※ ajax를 사용하여 php에서 회원정보데이터 작업을 하고 제이쿼리에서 이벤트로 정보 노출 진행

 

※ change(), text() 응용

https://kuk1938.tistory.com/67

[8] JavaScript & JQuery - change(), text()

 

---

1. html 코드

ㄴ select박스, 검색, 초기화 버튼 생성

 

https://kuk1938.tistory.com/64

[18] PHP - 회원 목록(게시판 목록)

ㄴ php 회원목록에서 사용한 방식으로 php while문 사용하여 정보 가져오기

 

<?php 
	$sql = "SELECT * FROM member WHERE use_yn ='Y'";
	$member = $conn->query($sql);
?>

ㄴ 회원목록 쿼리문 사용(PHP)

 

2. JQuery 코드 작성

// 회원검색 - ajax 활용
$(".member").change(function(){
	var mem = $(".member").val(); // 회원 고유번호 select val

	// 선택안함 선택시
	if(!mem){
		$(".data").hide();
		$(".mem_id").text("");
		$(".mem_name").text("");
		$(".mem_email").text("");
		$(".no_data").show();
	}else{
		$.ajax({
			url : "search_result.php",
			type : "POST",
			data : { mem : mem },
			success : function(result){

				if(mem == result['idx']){
					$(".data").show();
					$(".no_data").hide();
					var id = "아이디 : "+result['id'];
					var name = "이름 : "+result['name'];
					var email = "이메일 : "+result['email'];
					$(".mem_id").text(id);
					$(".mem_name").text(name);
					$(".mem_email").text(email);
				}else{
					alert("검색에 실패하였습니다.");
					return false;
				}
			}
		})
	}
})

ㄴ ajax전송하여 php에서 회원정보 가져오게 처리

ㄴ 정보 조회

- 성공 : 검색성공영역 출력, 아이디&이름&이메일 출력

- 실패 : 검색실패 경고문

ㄴ 선택안함시 초기화

// 초기화 버튼 클릭시
$(".reset").click(function(){
	$(".data").hide();
	$(".mem_id").text("");
	$(".mem_name").text("");
	$(".mem_email").text("");
	$(".no_data").show();
})

ㄴ 초기화버튼 클릭시 이벤트

ㄴ 검색 하기전으로 되돌리고, text도 다 초기화 하도록 제이쿼리 코드 작성.

 

3. PHP 코드(회원정보처리)

<?php 
	header("Content-Type: application/json");
	require_once 'config.php';
	$idx = $_POST['mem']; // 회원 고유번호

	// 고유번호 조회 쿼리문
	$sql = "
		SELECT * FROM member 
		WHERE idx = '{$idx}' 
	";

	$result = $conn->query($sql); // 객체지향
	$select = $result->fetch_assoc(); // 객체지향

	// 고유번호 중복확인
	if($select){
		echo json_encode($select);
	}else{
		echo "pass"; // 고유번호 중복 아닐때
	}
?>

ㄴ 추가될 조건문

ㄴ 조회한 정보를 배열로 담아서 json형태로 전송해주기 위하여 상단에 header를 설정해주었음.

 

4. 사이트(기능) 확인

 

ㄴ Q. select박스의 회원을 선택시 해당 회원의 정보가 나타나도록 하고싶습니다.

ㄴ 정상 작동완료