반응형
php ajax json을 이용해서 crud(조회) 예제1
#화면
#db table
#index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>crud</title>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Bootstrap -->
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
body{
margin:0;
padding:0;
background-color:#f1f1f1;
}
.box{
width:750px;
padding:20px;
background-color:#fff;
border:1px solid #ccc;
border-radius:5px;
margin-top:100px;
}
</style>
</head>
<body>
<div class="container box">
<h3 align="center">php Ajax Crud</h3>
<br/><br/>
<br/><br/>
<label>성을 입력하세요</label>
<input type="text" name="first_name" id="first_name" class="form-control" />
<br/>
<label>이름을 입력하세요</label>
<input type="text" name="last_name" id="last_name" class="form-control" />
<br/><br/>
<div align="center">
<!-- 클릭했을 때 user id를 알 수 있게 숨겨 둔다.-->
<input type="hidden" name="id" id="user_id" />
<button type="button" name="action" id="action" class="btn btn-warning">추가</button>
</div>
<br/><br/>
<!-- ++++++++++++++++++결과 리스트 출력 테이블++++++++++++++++++++++++ -->
<!-- select.php에서 받아온 데이터를 이곳에다가 붙인다. -->
<div id="result" class="table-responsive">
</div>
</div>
</body>
<script>
$(document).ready(function(){
fetchUser();
function fetchUser()
{
var action = "select";
//users 리스트를 select.php 에서 받아온다.
$.ajax({
url:"select.php",
method:"POST",
data:{action:action},
success:function(data){
$('#first_name').val('');
$('#last_name').val('');
$('#action').text("추가");
$('#result').html(data);
}
})
}
});
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
#select.php
<?php
//최종적으로 db에서 가져온 데이터를 가공한 결과 값을 담을 변수
$output = '';
//db연결 본인의 db 정보를 넣어준다!
$connect = mysqli_connect("localhost", "root", "비밀번호","db이름");
//ajax로 넘긴 데이터 값은 "select"
//값이 존재하면 true를 리턴
if(isset($_POST["action"]))
{
//users테이블 조회 프로시져를 만든다.
$procedure = "
CREATE PROCEDURE selectUser()
BEGIN
SELECT * FROM users ORDER BY id DESC;
END;
";
//기존에 프로시져가 존재한다면 지운다.
if(mysqli_query($connect,"DROP PROCEDURE IF EXISTS selectUser"))
{
//mysqli_query:DB에 쿼리 전송
if(mysqli_query($connect,$procedure))
{
$query = "CALL selectUser()";
///mysqli_query:DB에 쿼리 전송 후 결과값을 변수에 담는다
$result = mysqli_query($connect,$query);
$output .= '
<table class="table table-bordered">
<tr>
<th width="35%">성</th>
<th width="35%">이름</th>
<th width="15%">수정</th>
<th width="15%">삭제</th>
</tr>
';
//mysqli_num_rows 함수는 리절트 셋(result set)의 총 레코드 수를 반환한다.
if(mysqli_num_rows($result) >0)
{
//mysqli_fetch_array 함수는 mysqli_query 를 통해 얻은 리절트 셋(result set)에서 레코드를 1개씩 리턴해주는 함수다.
//레코드를 1개씩 리턴해주는 것은 mysqli_fetch_row 나 mysqli_fetch_assoc 와 동일하지만 리턴하는 배열의 형태가 틀리다.
//mysqli_fetch_array 함수는 순번을 키로 하는 일반 배열과 컬럼명을 키로 하는 연관배열 둘 모두 값으로 갖는 배열을 리턴한다.
//#참고!
//mysqli_fetch_row 일반 배열(순번을 키로한다.)
//mysqli_fetch_assoc 연관 배열
//mysqli_fetch_array 일반 배열 + 연관배열(컬럼명을 키로 한다)
//값이 있으면 true를 리턴한다.
while($row = mysqli_fetch_array($result)){
$output .= '
<tr>
<td>'.$row["first_name"].'</td>
<td>'.$row["last_name"].'</td>
<td><button type="button" name="update" id="'.$row["id"].'" class="update">수정</button></td>
<td><button type="button" name="delete" id="'.$row["id"].'" class="delete">삭제</button></td>
</tr>
';
}
}// 네번째 if문 끝
else
{
$output .= '
<tr>
<td colspan="4">데이터가 없습니다.</td>
</tr>
';
}
$output .= '</table>';
//최종출력!
echo $output;
}// 세번째 if문 끝
} // 두번째 if 문 끝
}//첫번째 if문 끝!
?>
반응형
'PHP 박살내기 > php ajax json' 카테고리의 다른 글
| php mysql ajax bootstrapModal을 이용해서 동적 웹페이지 만들기1 (조회- 리스트 뿌리기) (3) | 2017.09.14 |
|---|---|
| php ajax json을 이용해서 crud(삭제) 예제4 (3) | 2017.09.13 |
| php ajax json을 이용해서 crud(수정) 예제3 (1) | 2017.09.12 |
| php ajax json mysql을 이용해서 crud(추가) 예제2 (1) | 2017.09.12 |
| ajax 와 json 을 통해 동적으로 url을 제어하고 데이터를 받아오기 간단예제 (0) | 2017.09.11 |
댓글