ajax 상대 경로 설정 문제 완벽 해결방법

Web 프로그램/js, jQuery 2017. 2. 21. 13:57

728x90

loginChk.php 파일의 경로가 /abc/pages/loginChk.php 로 되어 있다.

로그인 모달창에서 로그인 처리를 하는데 경로설정에 대한 문제로 골치가 아팠다.

유연한 상대경로 설정하는 방법을 몰라서 겪은 증상이다.

아래와 같이 경로에 PHP의 상대경로를 직접 입력하면 문제가 될까? 안될까?

이렇게 입력하면 ajax 에서는 경로를 인식하지 못한다.

자동 상대경로 설정법은 http://link2me.tistory.com/1197 를 참조하면 된다.

// 로그인 처리
$('#login-submit').click(function(e){
    e.preventDefault();
    //alert(window.location.pathname); // 현재 경로 확인
    $.ajax({
        url: <?php echo $g['path_page'];?>"+'loginChk.php',
        type: 'POST',
        data: {userid:$('#userid').val(), password:$('#password').val()},
        dataType: "json",
        success: function (response) {
           if(response.result == 1){
           //alert('로그인 성공');
               $('#modal-login').modal('hide');
               location.reload(); // 화면 갱신
           } else {
           alert('로그인 실패');
           }
        },
        error: function(jqXHR, textStatus, errorThrown){
           alert("arjax error : " + textStatus + "\n" + errorThrown);
        }
    });
});

해결방법

PHP의 변수를 ajax 등 javascript 로 넘기기 위해서는 HTML 로 일단 저장해야 한다.

<body></body> 사이에 아래 코드를 추가한다.

내용은 전혀 보이지 않게 처리한다.

그런 다음에 아래와 같이 코드를 구현하면 해결된다.

// 로그인 처리
$('#login-submit').click(function(e){
    e.preventDefault();
    //alert(window.location.pathname); // 현재 경로 확인
    var loginpath =$("#ajax_loginpath").attr('data-path');
    $.ajax({
        url: loginpath+'loginChk.php',
        type: 'POST',
        data: {userid:$('#userid').val(), password:$('#password').val()},
        dataType: "json",
        success: function (response) {
           if(response.result == 1){
               //alert('로그인 성공');
           $('#modal-login').modal('hide');
           location.reload(); // 화면 갱신
           } else {
               alert('로그인 실패');
           }
        },
        error: function(jqXHR, textStatus, errorThrown){
           alert("arjax error : " + textStatus + "\n" + errorThrown);
        }
    });
});

결론 정리

상대경로의 개념은 현재 실행되는 파일을 기준으로 경로(path)를 상대적으로 설정한다.

따라서 실행되는 파일의 위치가 달라지면 그 위치를 기준으로 경로를 상대적으로 설정하기 때문에

../../loginChk.php 처럼 적어주면 문제가 생긴다.

실행되는 파일의 위치가 어디든지 간에 상대경로 문제가 아무런 문제없이 해결되기 위해서는 코드를 잘 짜야 한다.

이런 문제때문에 계속 문제에 부딪치면서 완벽한 해결책을 구현해보겠다는 일념으로 드디어 해결을 했다.

자동 상대경로 설정법은 http://link2me.tistory.com/1197 과 이 게시글을 활용하면 누구든지 경로설정 문제로 골치아픈 일은 없을 것이다.

저작자표시 비영리

'Web 프로그램 > js, jQuery' 카테고리의 다른 글

자바스크립트 값을 PHP로 전달 관련 알아둘 사항 (0)	2017.10.25
jQuery URL parameter 값 가져오기 (0)	2017.03.18
window.location 정리 (0)	2017.02.16
[javascript] 자바스크립 데이터 타입 및 다시 보는 기초 (0)	2017.01.15
[jQuery] dynamic input box 추가 using jQuery (0)	2017.01.07

Link2Me