Ajax는 Django를 양식없이 호출합니다.

Question

Ajax를 처음 접했으므로 머리를 감싸려고 노력하고 있습니다. 내 자바 이벤트 핸들러를 span 요소의 onclick에 연결하여 Ajax 호출을 작성하려고합니다. 템플릿에는 양식 요소가 없습니다. Django에서 폼 요소없이 Ajax 호출을 할 수 있습니까? 내가 이해하는 바에 따르면, 나는 그것을 작동시키지 못합니다. 내보기에서 요청을 살펴보면 request.is_ajax() 호출은 항상 false를 반환하므로 HTTP_X_REQUESTED_WITH 헤더가 없습니다. 여기 내 자바 스크립트 기능

<td><span class="header" onclick="sort_user_table('username')"><a href="">Username</a></span></td> 

의

:

여기에 내 템플릿의 관련 부분의

function sort_user_table(col_name) { 
    $.ajax({ 
    url: "/listusers/", 
    data: {sort_order: col_name}, 
    headers: {'HTTP_X_REQUESTED_WITH': 'XMLHttpRequest'}, 
    type: "GET", 
    dataType : "json", 
    success: function(json) { 
     alert('json = ' + json); 
    }, 
    }); 
} 

그리고 여기 내보기입니다 : 몇 가지가 당신이 할 수있는

def list_users_page(request): 
    if request.is_ajax(): 
    sort_order = request.GET['sort_order'] 
    users = User.objects.all().order_by(sort_order) 
    data = serializers.serialize('json', users) 
    json_users = json.dumps(data) 
    return HttpResponse(json_users, mimetype='application/json') 
    else: 
    users = User.objects.all().order_by('last_name') 
    variables = RequestContext(request, { 
     'users': users, 
    }) 
    return render_to_response('users_page.html', variables) 

Answer 1

그래, 무슨 일이 일어 났는지 알았어. 필자는 템플릿 코드를 게시하는 과정에서 실수를 범했기 때문에 (나는 간단하게하려고했지만 중요한 정보를 남기지 못했습니다).

<td><span class="header" onclick="sort_user_table('username')"><a href="">Username</a></span></td> 

가 href 문제를 일으키는 무엇 : 다음과 같은 코드의 실제 조각이 어떻게 표시되는지를 보여줍니다. 실제로 링크이기 때문에 Username span 요소를 클릭하면 새로운 리소스에 대한 요청이 이루어졌습니다. 따라서 자바 스크립트 코드가 실행 중이지만 실제로는 Ajax 요청이 아니며 단순한 HTTP 요청이었습니다. span 요소에서 href을 제거하면 모든 것이 예상대로 작동합니다. HTTP_X_REQUESTED_WITH 헤더가 전송되고 Django 뷰는 request.is_ajax()에 응답합니다.

Answer 2

변경 필요 :

1. jQuery를 사용하여 AJAX 호출을하는 것처럼 보입니다. 그렇다면 jQuery가 자동으로 처리하므로 서버가 AJAX 호출이라고 생각하게하려면 헤더를 수동으로 추가 할 필요가 없습니다. 당신이 Users.objects.all()를 호출하여 뷰의 request.is_ajax 블록에서

2. (유의 Users에 s 후행) 당신이지고있는 문제는 Users에 대한 잘못된 호출입니다 수 있습니다, 그래서 당신의 else 블록에 있지만 User.objects.all()을.

요청 헤더를 검사하기 위해 브라우저에서 사용할 수있는 요청 검사 도구를 사용하는 것이 좋습니다. 모든 요청이 올바르게 구성되면 사용자에게 표시됩니다.

AJAX 요청 옵션에 success 외에도 error 콜백을 추가해야 요청 실패시 실패한 사항에 대한 정보를 얻을 수 있습니다.