switch 는 Ajax로 myslq update 어떻게 하나요?
본문
샘플 좀 볼 수 있을까요?
답변 2
위에 챗GTP 는 그누보드용이 아니니 참고만 하시고
간단한 예제 알려드릴께요.
우선 해당 페이지에 스위치시 input 값을 넣던지 아니면 radio 자체로 만들던지 하고
아래 펑션을 호출하세요.
<script type="text/javascript">
function adp_ajaxscript(){ // 실행할 명령어
$.ajax({
type: "POST",
url: "ajax.php", // 불러올 아작스 파일
data: {
"data1":$("input[name='해당inputname']").val(),
"data2":$("input[name='해당inputname']").val(),
"data3":$("input[name='해당inputname']").val()
},
success: function(msg){
if(msg == "ok"){
location.reload();
}else{
alert('저장에 실패했습니다.');
}
},
error : function() {
alert('오류가발생했습니다 - 에러코드 : adp_ajaxscript');
}
});
}
</script>
이렇게 스크립트로 해당 데이터를 ajax.php 로 넘깁니다.
그러면 ajax.php 에서
include_once('./_common.php'); // 커먼 파일은 알아서 로드
$data1 = $_POST['data1'];
$data2 = $_POST['data1'];
$data3 = $_POST['data1'];
$adp_ajaxsql = "여기에 넣고 싶은 쿼리문";
$result = sql_query($adp_ajaxsql);
if($result){ // 성공?
echo 'ok';
return;
}
echo 'no'; // 실패
이렇게 하시면 업데이트가 성공하면 새로고침 될것이고 아니면 alert 오류가 나올거에요.
switch(스위치)를 Ajax로 MySQL에 UPDATE하는 방법은 다음과 같습니다.
이 과정은 HTML + jQuery (Ajax) + PHP + MySQL을 사용하여 구현됩니다.
1. HTML - Switch 버튼 만들기
<input type="checkbox" class="toggle-switch" data-id="1">
-
data-id속성을 사용하여 데이터베이스에서 업데이트할 레코드의 ID를 저장합니다.
2. jQuery + Ajax - 스위치 변경 시 Ajax 요청
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$(".toggle-switch").on("change", function(){
var id = $(this).data("id"); // 레코드 ID 가져오기
var status = $(this).prop("checked") ? 1 : 0; // 체크 상태 확인
$.ajax({
url: "update_status.php", // 요청할 PHP 파일
type: "POST",
data: { id: id, status: status }, // 전송할 데이터
success: function(response) {
alert("업데이트 성공: " + response);
},
error: function() {
alert("오류 발생!");
}
});
});
});
</script>
-
on("change")이벤트를 사용하여 스위치가 변경될 때 Ajax 요청을 보냅니다. -
data-id로 식별자(id)를 가져옵니다. -
.prop("checked")를 사용하여 상태를1(ON)또는0(OFF)로 설정합니다. -
$.ajax()를 이용해POST요청을 보냅니다.
3. PHP - MySQL 업데이트 처리 (update_status.php)
<?php
$host = "localhost";
$user = "root";
$pass = "";
$dbname = "your_database";
$conn = new mysqli($host, $user, $pass, $dbname);
if ($conn->connect_error) {
die("연결 실패: " . $conn->connect_error);
}
$id = $_POST['id'];
$status = $_POST['status'];
// SQL 업데이트 실행
$sql = "UPDATE your_table SET status = ? WHERE id = ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("ii", $status, $id);
if ($stmt->execute()) {
echo "성공";
} else {
echo "실패: " . $conn->error;
}
$stmt->close();
$conn->close();
?>
-
MySQLi를 사용하여UPDATE쿼리를 실행합니다. -
bind_param("ii", $status, $id)를 사용하여 SQL 인젝션을 방지합니다.
4. MySQL 테이블 구조 예시
CREATE TABLE your_table (
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(100),
status TINYINT(1) DEFAULT 0
);
-
status컬럼을TINYINT(1)로 설정하여0또는1값을 저장합니다.
정리
-
HTML에서
switch(체크박스) 클릭 이벤트를 감지 -
jQuery + Ajax를 사용하여 서버로id와status를 전송 -
PHP에서 MySQL
UPDATE실행 -
Ajax의
success콜백으로 결과 처리
chatgpt 답변입니다.