Ajax 요청 후 'div' 업데이트

Question

이것은 Django에서의 첫 번째 프로젝트입니다. 저는 Django, ajax 및 javascript를 처음 사용합니다. Ajax 요청을 한 후 jinja 템플릿으로 데이터를 보내야 합니다.

내 index.html은 다음과 같습니다.

{% if data %}
  <p>{{data.title}}</p>
  <p>{{data.price}}</p>
{% endif %}

제 자바스크립트는 다음과 같습니다:

<script>
 $.아약스({
        유형: "POST",
        url: "/", // 실제 뷰의 URL로 대체
        데이터: {
            입력_값: "테스트",
            csrfmiddlewaretoken: "{{ csrf_token }}"
        },
        성공: 함수(응답) {
            title = response // 요청 후 응답은 { "data" : {"title":"t1", "price":20} }가 됩니다.
        },
        오류: 함수() {
            console.log("오류")
        }
    });

<스크립트>

이것이 가능한지 모르겠습니다. 어떤 사람들은 element.innerHTML을 사용하여 업데이트하는데 저는 jinja 형식으로 보내야 합니다. 감사합니다

Answer 1

여기에는 선호도에 따라 두 가지 옵션이 있습니다.

1. JSON 대신 템플릿 반환 여기서의 아이디어는 서버 측에서 템플릿을 생성한 다음 생성된 HTML을 AJAX 호출자에게 반환하는 것입니다. 따라서 Ajax 성공은 이 HTML 조각을 올바른 위치에 추가하는 것뿐입니다.

2. JS에서 div 렌더링 JSON 전략만 있거나 DRF를 사용하는 경우 유일한 방법은 루프를 사용하여 수신된 항목을 반복하고 동등한 HTML을 생성한 다음 문서에 추가하는 것입니다.

진자를 렌더링하기 위해 페이지를 생성할 때 아직 데이터를 받지 못했기 때문에 동일한 페이지에 넣을 수 없습니다.