최초 커밋
This commit is contained in:
root
+129
@@ -0,0 +1,129 @@
|
||||
|
||||
<!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>
|
||||
Reference in New Issue
Block a user