django 는 탬플릿 변수와 url 태그를 html 파일에서 사용하는데
만약 html과 js파일이 분리되어있다면, 자바스크립트에서 탬플릿 변수를 사용할 수 없다.
(django 태그를 먼저 처리하고, 그 후 스크립트 파일을 불러오기 때문이다.)
외부 자바스크립트에서 탬플릿 변수를 사용하기 위해서는 아래의 방법을 이용하여야 한다.
자바스크립트에 Django의 url 태그 사용 방법
외부 js 파일에서 장고 탬플릿 변수 or 탬플릿 태그를 사용하기 위해서는
자바스크립트 변수를 할당하는 방법이 있다.
무슨 말이냐면,
1. 먼저 스크립트를 불러오기 전에 html <script> 부분에 자바스크립트 변수를 할당하여 변수에 탬플릿 변수, 혹은 url 태그를 할당해 준다.
2. 그 후 스크립트를 불러오고
3. 외부 js 파일안에서는 html에서 정의한 변수를 다른 할당없이 바로 사용할 수 있다.
(스크립트는 순차적으로 로딩되기 때문에 이게 가능한 것 같다.,,, 혹시 몰라서 defer로 불러왔다.)
이렇게 하면 외부 스크립트에서도 url 태그의 원하는 페이지를 가져올 수 있다.
html 헤드 부분
{% load static %}
<!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.0">
<title>Safety-Map Home</title>
<script type="text/javascript"> var setpointpage = "{% url 'getspotpoint' %}" </script>
<script defer src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <!--JQuery-->
<script defer src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script> <!-- 주소검색 api-->
<script defer src ="{% static 'js/home.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/home.css' %}?ver=2">
</head>
JavaScript 부분
ajax 통신에서 url 부분에 html script 부분에서 정의한 변수 "setpointpage"를
별다른 설정없이 그대로. 아무것도 안하고 그대로 가져다가 썻다.
(신기하네)
//길찾기 버튼 클릭
$("#find_botton").click(function(){
//출발지 목적지 주소 -> 좌표변환
new Promise((succ, fail) =>{
$.ajax({
type:'POST',
url : setpointpage,
data:{
'StartAddr' : $('#StartAddr').val(),
'EndAddr' : $('#EndAddr').val(),
'csrfmiddlewaretoken': csrftoken,
},
success : (result) => {
resultArray=result;
console.log(resultArray)
succ(result); //성공하면 검색결과 처리
},
fail: (error) => {
console.log(error);
}
});
//resultArray : startaddr, endaddr 좌표
})
끝!
참고
'JavaScript' 카테고리의 다른 글
| 모달창 안에 카카오 맵 불러오기 (동적 웹페이지 로딩) (0) | 2021.09.28 |
|---|---|
| 템플릿 리터럴 (0) | 2021.09.21 |
| 주소검색 api (kakao 우편번호 서비스 api) (0) | 2021.08.23 |
| CSS, JS 수정된 파일이 브라우저에 적용이 안될 때 (0) | 2021.08.17 |
| [JS] 자바스크립트 Promise (0) | 2021.08.16 |