2014-01-07 2 views
3

저는 Django를 처음 사용하고 있으며, 장고보기에서 사용되는 ajax에서 보낸 변수를 얻으려고 시도하고 있습니다. 내보기 :Ajax 호출을 사용하여 Django보기를 업데이트하십시오.

def index(request): 
    if (request.is_ajax()): 
    username = request.GET['user'] 
    else: 
    username = '' 
    context = {'user':username} 
    return render(request, 'index.html', context) 

와 아약스 :

$.ajax({ 
    url: '/index/', 
    type: 'GET', 
    data: {user: response.name, page: page} 
}); 

내 문제가 username가 AJAX 호출을 기반으로, 뷰에 업데이트되지 않는다는 것입니다. 네트워크 응답을 살펴보면 적절한 업데이트 된 사용자 이름을 전달하기 때문에 Ajax 호출이 제대로 작동하고 있다는 것을 알고 있습니다.

내가 믿는 것은보기가로드 된 다음 아약스 호출이 발생하고 사용자 이름이 업데이트된다는 것입니다. 그러나보기가 다시 렌더링되지 않으므로 변경되지 않습니다. 나는 사용자 이름을 얻은 후에 또 다른 렌더링을 시도했지만 아무 것도 변경하지 않았고 또한 ajax 호출을 처리하기위한 별도의 뷰를 만들었지 만보기가 항상 ajax 요청없이로드되기 때문에 어느 쪽도 작동하지 않는 것처럼 보입니다. 사실입니다.

어떻게 작동합니까? 어떤 도움을 주셔서 감사합니다.

+0

아약스 응답에서 무엇을 얻습니까? 너는 그걸로 무엇을하고 있니? Ajax 요청에'complete : function (resp) {...}'를 추가하면 그 함수 안에'resp.responseText'가 무엇입니까? – jproffitt

+0

죄송합니다. 아내가있는 초보자도 있습니다. console.log에 응답 텍스트가 있으면 새로운 'username'이있는 업데이트 된 색인 페이지가 기록됩니다. 그렇다면 페이지를 다시로드해야 성공할 수 있습니까? – mcw

+0

DOM을 새 DOM으로 바꿀 수 있습니다. 그러나 이것은 매우 비효율적 인 방법입니다. 사용자 이름을 반환하고 업데이트해야합니다. 브랜든의 도움에 대한 답변을보십시오. console.log (json.user);'$ ('username')와 같은 일을한다 .html (json.user)' – jproffitt

답변

6

JavaScript가 DOM을 업데이트하는 데 사용할 수있는 Ajax를 통해 응답을 보내려는 경우 $ .ajax 호출에서 처리기로 전달할 수있는 JSON 형식의 HttpResponse을 반환해야합니다. 예 :

자바 스크립트에서 다음
import json 

from django.contrib.auth.models import User 
from django.http import HttpResponse 
from django.shortcuts import render 


def index(request): 
    if request.is_ajax(): 
     username = request.GET.get('user', '') 
     user = User.objects.get(username=username) 

     # do whatever processing you need 
     # user.some_property = whatever 

     # send back whatever properties you have updated 
     json_response = {'user': {'some_property': user.some_property}} 

     return HttpResponse(json.dumps(json_response), 
      content_type='application/json') 

    return render(request, 'index.html', {'user': ''}) 

, 당신은 할 수 있습니다 :

이 방법으로
$.get('/index/', {user: response.name, page: page}, function(json_response) { 
     console.log(json_response.user.some_property); 
}); 

이보기에 정상적인 GET 요청은 렌더링 된 HTML 템플릿을 반환합니다. Ajax 요청의 경우 뷰는 jQuery $ .get 호출에서 콜백에 전달되는 JSON 형식의 HttpResponse를 리턴한다.

+0

'응답'이 정의되지 않았으며,'json.dumps (response)'줄에서 오는 오류가 발생했습니다. – mcw

+0

미안하지만 그건 내 잘못이야. 응답 변수의 이름에 대해 리팩토링을 수행했습니다. 내 대답이 업데이트되었습니다. – Brandon

+0

DOM을 올바르게 업데이트했습니다. 그러나 업데이트 된 사용자 이름을보기에 사용할 수있는 방법이 있습니까? 어떻게 든 그 값을 가져 와서 인덱스보기에 사용하십시오. 실제 애플 리케이션의 인덱스는 사용자 이름을 인수로 사용하여 쿼리를 실행하므로 나중에 쿼리에 대해이 새 사용자 이름을 얻는 방법을 알고 싶습니다. 지금까지 도와 줘서 고마워! – mcw

2

Ajax 호출을 통해 장고보기로 데이터를 보내려면 양식에 데이터를 추가 한 다음 ajax 요청으로 보내야합니다.

예 : 내 view.py :

def index(request): 
""" 
View function to handle Ajax request for image Link. 
:param request: Ajax request data. 
:return: image URL. 
""" 
if request.is_ajax(): 
    try: 
     username = request.POST['username'] 
     # perform operations on the user name. 

    except: 
     e = sys.exc_info() 
     return HttpResponse(e) 
    return HttpResponse(sucess) 
else: 
    raise Http404 

내 템플릿 index.html을

<html> 
 
    <head> 
 
     <title>Index</title> 
 
     <script> 
 
     $(document).ready(function() { 
 
      $('#btnSubmit').click(function() { 
 
       var data = new FormData(); 
 
       var username = $('#id_username').val() 
 
       data.append('username', username); 
 
       $.ajax({ 
 
        type: 'POST', 
 
        url: 'getuser/', 
 
        data: data, 
 
        processData: false, 
 
        contentType: false, 
 
        success: function(json) { 
 
         alert(json); 
 
        } 
 
       }) 
 
      }); 
 
     }); 
 
        
 
     </script> 
 
    </head> 
 
    <body> 
 
     <h1>Index</h1> 
 
     User name: <input type="text" name="fname" id="id_username"> 
 
     <input type="submit" id ="btnSubmit" name="submit" value="Send Test Push"> 
 
    </body> 
 
</html>

당신이 URL을에 아약스 호출 URL을 추가해야이 후 .py.

관련 문제