09. 사용자 페이지 구성방법(Ajax 사용방법)

01. Intro

 Ajax가 뭔지 찾아보면 동기 비동기? 어쩌고 저쪼고 말이 많다. 나도 아직 뭔소린지 잘 모르겠는데 쉽게 이해한 바로는 페이지를 이동하지 않고 일부분만 업데이트 되게 하는 기능을 말하는 것 같았다. 즉 화면에서 뭔가 변화가 생겼는데, 위의 주소창에서 주소의 변화가 없게 하는 것!

 Ajax는 한번만 해보면 다른데서 계속 복붙하면 된다 ㄱㄱ

02. 시작해보자

-일단 movie_select.html 파일을 연다. 여기서 ajax를 사용하기위해서 

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>를 꼭 불러온다음 다음 코드를 작성한다. 저렇게 한뒤 페이지에 들어갔을때 working이라고 경고창 뜨듯이 뜨면 잘된 것!

-눈이 침침한 사람들은 자세히봐라!

-이러고 나면 밑에 설렉트 창이랑 버튼을 만들어준다. 위에 form 태그에 적힌 어쩌고 저쩌고 내용은 밑에서 설명하겠다. 일단 따라 친다!

- 이러고 나면 이렇게 창이 뜬다

-이러고 나면 paythings/urls.py에 아래처럼 추가해준다. 이러고 나서 view파일에서 ajax_select 함수를 만들어서 ajax와 관련된 처리를 하도록 할것이다.

-일단은 ajax부분에서 해줄것들이 있는데

1).click함수는 버튼을 눌렀을때 안쪽에 있는 함수들이 실행되어라~ 하는 뜻이다

2)s_value는 select에서 선택한값을 가져오는건데 input태그 등등 여러 태그들의 값을 가져올때 대부분 비슷한 방법으로 한다

3)$.ajax안의 값은 그냥 깊게 이해하긴 어려운데 일단 url 부분에 어떤 함수에서 처리할것인지를 지정해줘야해서 ajax_select라고 쓴다.

4)data 부분은 ajax_select라는 함수로 넘겨줄 값을 지정하는 곳이다.

5)success는 성공하면 수행할 걸 써놓으면 된다!

-이제 드디어 ajax_select 함수이다. 여기서 읽어온 값을 처리해서 반환해준다. 여기서 다양한 응용이 가능하다. 모델을 이용해서 db의 값을 반환해도 되지만 우리는 그냥 읽어온 값을 반환한다.

- 이렇게 하면 값을 선택하고 click me를 선택하면 화면이 변한다. 이게 ajax이다!

03. 마무리하며

혼자 ajax를 알아볼때 얼마나 고생했는지 모른다. 아는것도 없는데 겨우겨우 했었다. 다시 또하는데도 자잘한 실수들을 많이 했는데 결국했다. 나처럼 덤벙거리는 다른 분들도 이걸 보고 수월하게 따라하길 바란다!