130 lines
5.3 KiB
PHP
130 lines
5.3 KiB
PHP
|
|
<!DOCTYPE html>
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
|
<title>:: TEST ::</title>
|
|
<script type="text/javascript" src="./js/jquery-3.6.1.min.js"></script>
|
|
<script language="JavaScript">
|
|
function ufn_insert()
|
|
{
|
|
const url = "https://eg-bim.co.kr/egbim1/ryu_i.php";
|
|
const l_ip = $("#ip").val();
|
|
const v_ref_value = 'test';
|
|
|
|
if (!l_ip) {
|
|
console.warn("IP 주소 입력 필드가 비어있습니다.");
|
|
alert("IP 주소를 입력해주세요.");
|
|
return; // 함수 실행 중단
|
|
}
|
|
|
|
$.ajax({
|
|
url: url,
|
|
type: "POST",
|
|
data: {
|
|
'v_ip': l_ip,
|
|
'v_ref': v_ref_value
|
|
},
|
|
success: function(data) {
|
|
// 4. data 처리 로직 개선
|
|
// 서버로부터 받은 'data'를 어떻게 활용할지 명확히 정의해야 합니다.
|
|
if(data){
|
|
alert("성공적으로 저장 되었습니다:", data);
|
|
}
|
|
|
|
// 만약 서버가 배열을 반환하고 각 요소를 문자열로 합쳐야 한다면:
|
|
let resultString = '';
|
|
|
|
if (Array.isArray(data)) {
|
|
for (let i = 0; i < data.length; i++) { // 6. i 변수 let으로 선언
|
|
resultString += data[i];
|
|
}
|
|
console.log("처리된 데이터:", resultString);
|
|
// 예: $('#resultArea').text(resultString);
|
|
} else if (typeof data === 'object' && data !== null) {
|
|
// 서버가 JSON 객체를 반환하는 경우:
|
|
console.log("서버 응답 객체:", data);
|
|
// 예: $('#message').text(data.message);
|
|
} else {
|
|
console.log("알 수 없는 형태의 응답 데이터:", data);
|
|
}
|
|
},
|
|
error: function(jqXHR, textStatus, errorThrown) {
|
|
// 5. 오류 처리의 구체성 향상
|
|
console.error("AJAX 요청 실패:", textStatus, errorThrown);
|
|
console.error("서버 응답 전문 (jqXHR):", jqXHR);
|
|
alert("데이터 전송 중 오류가 발생했습니다. 자세한 내용은 콘솔을 확인해주세요.");
|
|
// 사용자에게 친화적인 오류 메시지를 표시할 수 있습니다.
|
|
// 예: $('#errorMessage').text("IP 전송에 실패했습니다. 잠시 후 다시 시도해주세요.");
|
|
}
|
|
});
|
|
}
|
|
|
|
function ufn_del()
|
|
{
|
|
const url = "https://eg-bim.co.kr/egbim1/ryu_d.php";
|
|
const l_ip = $("#ip").val();
|
|
|
|
// IP 값이 비어있을 경우에 대한 간단한 유효성 검사 추가 (선택 사항)
|
|
if (!l_ip) {
|
|
console.warn("IP 주소 입력 필드가 비어있습니다.");
|
|
alert("IP 주소를 입력해주세요.");
|
|
return; // 함수 실행 중단
|
|
}
|
|
$.ajax({
|
|
url: url,
|
|
type: "POST",
|
|
data: {
|
|
'v_ip': l_ip
|
|
},
|
|
success: function(data) {
|
|
// 4. data 처리 로직 개선
|
|
// 서버로부터 받은 'data'를 어떻게 활용할지 명확히 정의해야 합니다.
|
|
// 예를 들어, 받은 데이터를 콘솔에 출력하거나, 특정 HTML 요소에 표시할 수 있습니다.
|
|
if(data){
|
|
alert("성공적으로 삭제 되었습니다:", data);
|
|
}
|
|
|
|
console.log("성공적으로 데이터를 받았습니다:", data);
|
|
|
|
// 만약 서버가 배열을 반환하고 각 요소를 문자열로 합쳐야 한다면:
|
|
let resultString = '';
|
|
if (Array.isArray(data)) {
|
|
for (let i = 0; i < data.length; i++) { // 6. i 변수 let으로 선언
|
|
resultString += data[i];
|
|
}
|
|
console.log("처리된 데이터:", resultString);
|
|
// 예: $('#resultArea').text(resultString);
|
|
} else if (typeof data === 'object' && data !== null) {
|
|
// 서버가 JSON 객체를 반환하는 경우:
|
|
console.log("서버 응답 객체:", data);
|
|
// 예: $('#message').text(data.message);
|
|
} else {
|
|
console.log("알 수 없는 형태의 응답 데이터:", data);
|
|
}
|
|
},
|
|
error: function(jqXHR, textStatus, errorThrown) {
|
|
// 5. 오류 처리의 구체성 향상
|
|
console.error("AJAX 요청 실패:", textStatus, errorThrown);
|
|
console.error("서버 응답 전문 (jqXHR):", jqXHR);
|
|
alert("데이터 전송 중 오류가 발생했습니다. 자세한 내용은 콘솔을 확인해주세요.");
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</head>
|
|
<BODY>
|
|
<form>
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<input type="text" id="ip" name="ip" value=""/>
|
|
<button id="bInsert" type="button" onclick="ufn_insert();">Insert!!!</button>
|
|
<button id="bDel" type="button" onclick="ufn_del();">Delete!!!</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</form>
|
|
</BODY>
|
|
</HTML>
|