2017-11-13 11 views
1

Ajaxに問題があり、HTMLページの情報を再ロードせずにその情報を更新するにはどうすればいいですか?DjangoでAjaxを使用したhtmlページの情報の更新

def index(request): 
    some stuff 
    context = { 
     some stuff 
    } 
    return render(request, "header.html", context) 

をそして私はちょうど私のheader.htmlファイルに{}コンテキストからの変数を使用します。
だから、私は私のviews.pyファイル内の関数を持っています。そして、質問は - どのように私はインデックス機能を実行し、私のheader.htmlファイルに新しい変数を再ロードせずに送ることができますか?

+0

など、どのような要素のHTMLテキストまたはクラス名やスタイルを変更するには、この新しいエンドポイントからのデータのいずれかのタイプを送ることができますDjangoのテンプレートはそうHTMLに変換され、再ロードせずにhtmlを更新することはできませんが、ajaxの成功関数で、javascriptを使って 'element.innerhtml =" new stuff "' –

+0

のようにHTMLを変更することができます。表示する変数を送信してからhtmlを更新する方法 –

答えて

3

まず、新しいエンドポイントを作成して、目的のデータを任意の形式で取得します。私はJSONを好む。

新しいエンドポイントは:

# views.py 

from django.http import JsonResponse 
def new_endpoint(request): 
    """Returns `JsonResponse` object""" 

    # you can change the request method in the following condition. 
    # I dont know what you're dealing with. 
    if request.is_ajax() and request.method == 'GET': 
     # main logic here setting the value of resp_data 

     resp_data = { 
      'html': 'stuff', 
      # more data 
     } 

     return JsonResponse(resp_data, status=200) 

はその後、あなたはなど、最終的には方法、データ、ヘッダー、このエンドポイントを呼び出すAJAXの一部をコーディングする必要があり、希望取得するsuccessコールバックメソッドを定義しますデータ。

AJAX

var data = {}; 
$.ajax({ 
    url: '/your-new-endpoint-url', 
    type: 'GET', 
    data: data, 
    dataType: 'json', 
    success: function(resp) { 
    $('#changingElement').html(resp.html); 
    } 
}); 

あなたは

関連する問題