반응형
php ajax json을 이용해서 crud(삭제) 예제4
파일경로
화면
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";
//[1] 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);
}
})
}
//[2] 추가 버튼 클릭했을 때 작동되는 함수
$('#action').click(function(){
//각 엘리먼트들의 데이터 값을 받아온다.
var firstName = $('#first_name').val();
var lastName = $('#last_name').val();
var id= $('#user_id').val();
var action = $('#action').text();
//성과 이름이 올바르게 입력이 되면
if(firstName !='' && lastName != ''){
$.ajax({
//insert page로 위에서 받은 데이터를 넣어준다.
url:"action.php",
method:"POST",
data:{firstName:firstName,lastName:lastName,id:id,action:action },
success:function(data){
//성공하면 action.php 에서 출력된 데이터가 넘어온다.
alert(data);
//입력 후 리스트 다시 갱신
fetchUser();
}
});
}else
{
alert('빈칸을 입력해 주세요');
}
});
//[3]수정 버튼을 클릭했을 때 작동되는 함수
$(document).on('click', '.update', function(){
//id속성값을 가져오기 - 클릭한 행의 id 값 - 즉 user_id 값이다.
var id = $(this).attr("id");
$.ajax(
{
url:"fetch.php",
method:"POST",
data:{id:id},
dataType:"json",
success:function(data)
{
//alert(data.first_name);
//data의 타입은 객체 object
//한 행에서 수정버튼을 누르면
//위쪽 입력창의 값이 추가 -> 수정으로 변경되게 만든다.
console.log(data);
$('#action').text("수정");
$('#user_id').val(id);
$('#first_name').val(data.first_name);
$('#last_name').val(data.last_name);
},error : function(request, status, error ){
// 오류가 발생했을 때 호출된다.
console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
}
});
});
//[4]삭제 버튼을 클릭했을 때 작동되는 함수
$(document).on('click','.delete',function(){
var id = $(this).attr("id");
if(confirm("삭제 하시겠습니까?"))
{
//구분자
var action = "delete";
$.ajax({
url:"action.php",
method:"POST",
data:{id:id,action:action},
success:function(data){
//리스트 다시 조회
fetchUser();
alert(data);
}
});
}else
{
return false;
}
});
});
</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>
action.php [삭제 버튼 눌렀을때 부분 추가]
<?php
//url에 action이라는 값이 존재하면
if(isset($_POST["action"]))
{ //db연결
$connect = mysqli_connect("localhost", "root", "비번","본인db명");
//url에 action이라는 값이 "추가" 라면
if($_POST["action"]=="추가")
{ //ajax로 넘긴 data를 받아준다.
$first_name=mysqli_real_escape_string($connect,$_POST["firstName"]);
$last_name=mysqli_real_escape_string($connect,$_POST["lastName"]);
//참고-mysqli_real_escape_string
//:MySQL로 질의를 전송하기 전에 안전하게 데이터를 만들기 위해 사용
//특수 문자열을 이스케이프하여 mysql_query() 수행시 안전하게 질의할 수 있도록 한다.
//insert 프로시저 생성
$procedure = "
CREATE PROCEDURE insertUser(IN firstName varchar(250),lastName varchar(250))
BEGIN
INSERT INTO users(first_name, last_name) VALUES(firstName,lastName);
END
";
//기존에 프로시저가 있으면 삭제
if(mysqli_query($connect,"DROP PROCEDURE IF EXISTS insertUser"))
{ //위에서 만든 프로시저 실행
if(mysqli_query($connect,$procedure))
{
$query = "CALL insertUser('".$first_name ."','".$last_name."')";
//프로시저 호출
mysqli_query($connect,$query);
echo '성공적으로 입력 되었습니다.';
}
}
}
// action 수정 버튼을 눌렀을 때
if($_POST["action"] == "수정")
{
$first_name = mysqli_real_escape_string($connect,$_POST["firstName"]);
$last_name = mysqli_real_escape_string($connect,$_POST["lastName"]);
$procedure = "
CREATE PROCEDURE updateUser(IN user_id int(111), firstName varchar(250),
lastName varchar(250))
BEGIN
UPDATE users SET first_name = firstName, last_name=lastName
WHERE id = user_id;
END;
";
if(mysqli_query($connect,"DROP PROCEDURE IF EXISTS updateUser"))
{
if(mysqli_query($connect, $procedure))
{
$query = "CALL updateUser('".$_POST["id"]."','".$first_name."','".$last_name."')";
mysqli_query($connect, $query);
echo '수정 되었습니다.';
}
}
}
// action 삭제 버튼을 눌렀을 때
if($_POST["action"] == "delete")
{
$procedure = "
CREATE PROCEDURE deleteUser(IN user_id int(100))
BEGIN
DELETE FROM users WHERE id = user_id;
END;
";
if(mysqli_query($connect, "DROP PROCEDURE IF EXISTS deleteUser"))
{
if(mysqli_query($connect,$procedure))
{
$query = "CALL deleteUser('".$_POST["id"]."')";
mysqli_query($connect, $query);
echo '삭제완료';
}
}
}
} //if(isset($_POST["action"])) 끝
?>
반응형
'PHP 박살내기 > php ajax json' 카테고리의 다른 글
| php mysql ajax bootstrap 모달창을 이용해서 동적 웹페이지 만들기2 (삽입) (0) | 2017.09.14 |
|---|---|
| php mysql ajax bootstrapModal을 이용해서 동적 웹페이지 만들기1 (조회- 리스트 뿌리기) (3) | 2017.09.14 |
| php ajax json을 이용해서 crud(수정) 예제3 (1) | 2017.09.12 |
| php ajax json mysql을 이용해서 crud(추가) 예제2 (1) | 2017.09.12 |
| php ajax json mysql을 이용해서 crud(조회) 예제1 (889) | 2017.09.11 |
댓글