0. 준비
jQuery 의 경우 페이지의 내에 선언을 해주는 부분이 필요합니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
위 코드를 페이지 의 <head> 태그 내에 넣어서 사용하면 됩니다.
1. ajax 로 PHP 에 값 전달하기
<script type="text/javascript">
$.ajax({
type : 'GET',
url : 'result_return.php',
data : {name:'홍길동', phone:'010-1234-1234'},
error : function(){
alert('통신실패');
},
success : function(result){
alert(result);
}
});
</script>
GET 방식을 이용해서 result_return.php 파일로 name과 phone 의 변수를 이용해 각 값을 전달합니다.
정상적으로 통신이 되었을 경우에는 php 에서 처리한 결과값을 알림팝업으로 띄우고 실패했을 경우 '통신실패' 라는 팝업을 띄우게 됩니다.
2. PHP 에서 값 받기
GET 방식으로 전달을 했기 때문에 PHP 에서는 $_GET[''] 와 같은 방법으로 값을 받아서 처리하는데 쓰면 됩니다.
<?php
$name = $_GET['name'];
$phone = $_GET['phone'];
echo $name.'의 전화번호는 '.$phone.'입니다.';
?>
3. 실질적인 사용법
2개의 선택박스(select 태그) 가 있고 첫번째 선택박스에서 옵션을 선택했을 때 두번째 선택박스의 값이 각각 나올 수 있도록 하는 게 필요한 경우가 생각보다 많더군요.
우선 두개의 파일이 필요한 건 마찬가지 입니다.
test.html 과 test.php 두개의 파일을 준비해 주세요.
다수의 그룹이 존재하고 있고, 그 그룹마다 유저가 있다고 할 때
첫번째 선택박스에서 그룹을 선택하면 두번째 선택박스에서는 유저를 선택할 수 있는 간단한 예제를 만들어 봤습니다.
우선 test.html 의 내용입니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<table>
<thead>
<th colspan="2">
동적 선택박스 예제
</th>
</thead>
<tr>
<td>그룹</td>
<td>
<select name="group" id="group">
<option value="agroup">그룹A</option>
<option value="bgroup">그룹B</option>
</select>
</td>
</tr>
<tr>
<td>그룹</td>
<td>
<select name="user" id="user">
<option value="">사용자</option>
</select>
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$('#group).change(function(){
var selectedValue = this.value;
$.ajax({
type : 'GET',
url : 'test.php',
data : {group:selectedValue},
error : function(){
alert('통신실패');
}
success : function(result){
$('#user').empty();
var users = jQuery.parseJSON(result);
$.each(users, function(){
$('#user').append('<option value="' + this.user + '">' + this.user + '</option>');
});
}
});
});
});
</script>
테이블안의 선택박스에 ID를 지정해 줬고, group 이라는 id를 가진 선택박스의 선택항목이 변경되면 위 스크립트가 적용이 됩니다.
json 방식을 통해 배열 데이터를 전달받을 예정이라 Jquery.parseJson() 함수가 사용된 것입니다.
이제 test.php의 내용입니다.
테이블(userlist)의 컬럼이 그룹명(group_name)이 있고 사용자 이름(user_name)이 있을 때
그룹내의 사용자 를 찾아내서 배열에 저장한 후 json 방식으로 되돌려 주는 코드입니다.
DB 접속하는 방법은
이전 포스트를 참고해 주세요
[HTML/PHP]DB 데이터 불러와서 표시하기 테이블로 표시하기
1. pdo 를 이용한 DB 접속 $host = 'localhost'; $dbname = 'mydb'; $username = 'root'; $rootpw = '1111'; try { $pdo = new PDO('mysql:host='.$host.';dbname='.$dbname, $username, $rootpw); } catch (PDOEx..
xrexter.tistory.com
<?php
$group = $_GET['group'];
$users = array();
$query = 'select * from userlist where group_name="'.$_group.'" order by user_name';
$result = $pdo->query($query);
foreach($result as $list){
array_push($users, array('user' => $list['user_name']));
}
$output = json_encode($users, JSON_UNESCAPED_UNICODE);
print_r($output);
?>
php 내용은 생각외로 간단합니다.
db에서 해당 그룹의 사용자 리스트를 뽑아내고
배열에 하나씩 추가 하는데 json 방식으로 전달을 해 줘야 되기 때문에 'user' => ~~ 와 같은 방식을 사용했습니다.
json_encode 부분에서 한글이 깨지는 경우가 있기 때문에 JSON_UNESCAPED_UNICODE 를 인자로 넣어줬습니다.
'Programming > PHP' 카테고리의 다른 글
| [PHP] 문자열 다루기 - 2. 문자열 나누기(explode) (0) | 2022.11.16 |
|---|---|
| [PHP] 문자열 다루기 - 1. 길이 구하기(strlen), 잘라내기(substr) (0) | 2022.07.05 |
| [PHP] 특정 기간의 날짜 배열 만들기 (0) | 2020.06.25 |
| [HTML/PHP]DB 데이터 불러와서 표시하기 테이블로 표시하기 (0) | 2019.08.30 |
| [PHP, MySQL]엑셀 파일 업로드 및 쿼리 적용하기 (0) | 2019.08.20 |