DjangoでJquery/Ajaxを使用してポップアップするフォームを取得するには？

Question

私は、クリックするとフォームがポップアップされるようにしたいというWebページ上のボタンを持っています。問題は、私はajaxでhtmlの情報を渡す方法がわかりません。

ビュー：

def ajax_shipping(request): 
    id_quote = request.GET.get('quote', None) 
    quote = HomeTable.objects.filter(id=id_quote).values_list('quote_num_id', flat=True) 
    items = ItemDetails.objects.filter(quote_num_id=quote).values_list('item', 'quan', 'shipped') 
    detail_list = [] 
    for x in items: 
     detail_list.append(x) 
    data = { 
     'item': detail_list 
     } 
    return JsonResponse(data) 

jQueryとアヤックス：私は正常にそうようにAJAXを使用してデータベースの情報を渡すことができますしかし、私は、フォームを送信する方法が分からない

$("#id_iden").on('change', function(){ 
    if ($(this).val() !== ""){ 
     var qn = $(this).val() 
     $.ajax({ 
     url: "/ship/ajax-shipping/", 
     data: { 'quote': qn }, 
     dataType: 'json', 
     success: function(data){ 
      if (data.item[0]){ 
      $('#id_item1').val(data.item[0][0]) 
      $('#id_quan1').val(data.item[0][1]) 
      $('#id_ship1').val(data.item[0][2]) 
      var bo = (data.item[0][1]) - (data.item[0][2]) 
      $('#id_bo1').val(bo) 
      } 
     } 
    }) 
    } 
}) 

をし、 html情報をポップアップ表示します。私はこれを達成するためにチュートリアルやガイダンスを探しています。ありがとう。

Answer 1

1. モーダルを使用してください。最も簡単な方法は、モーダルプラグインを含むブートストラップフレームワークを使用することです。
2. おそらくthisのようなものが必要です。ページ上にボタンがあり、クリックするとモーダルがポップアップし、モーダルにはフォームと別のボタンがあり、クリックするとAJAXを使用してフォームデータがハンドラビューに送信されます。 へ
3. あなたはAJAXコードでpostメソッドを使用する必要があり、あなたがpostを使用するときに、フォームを検証するためジャンゴcrsftokenを送信する必要があなたのビューにデータを送信します。

のはあなたがそうのようなAJAXを通じて、このデータを送信することができますよりも、AJAX /ajax/send-data-through-ajax/を使用して、フォームにボタンを提出するためのURLは、クラスsend-dataとクラスname-dataとpass-dataを持つ2つの入力フィールドがあるとしましょう：

$(document).ready(function() { 

    // AJAX POST 
    $('.send-data').click(function(){ 
     console.log('am i called'); 

     $.ajax({ 
      type: "POST", 
      url: "/ajax/send-data-through-ajax/", 
      dataType: "json", 
      data: { "name": $(".name-data").val(),"password": $(".pass-data").val() }, 
      success: function(data) { 
       alert(data.message); 
      } 
     }); 

    }); 


    // CSRF code 
    function getCookie(name) { 
     var cookieValue = null; 
     var i = 0; 
     if (document.cookie && document.cookie !== '') { 
      var cookies = document.cookie.split(';'); 
      for (i; i < cookies.length; i++) { 
       var cookie = jQuery.trim(cookies[i]); 
       // Does this cookie string begin with the name we want? 
       if (cookie.substring(0, name.length + 1) === (name + '=')) { 
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); 
        break; 
       } 
      } 
     } 
     return cookieValue; 
    } 
    var csrftoken = getCookie('csrftoken'); 

    function csrfSafeMethod(method) { 
     // these HTTP methods do not require CSRF protection 
     return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); 
    } 
    $.ajaxSetup({ 
     crossDomain: false, // obviates need for sameOrigin test 
     beforeSend: function(xhr, settings) { 
      if (!csrfSafeMethod(settings.type)) { 
       xhr.setRequestHeader("X-CSRFToken", csrftoken); 
      } 
     } 
    }); 


}); 

を

とあなたのview.pyファイルに：

import json 
from django.http import Http404, HttpResponse 

def ajax_data(request): 
    if request.is_ajax() and request.POST: 
     data = {'message': "{} added".format(request.POST.get('name'))} 
     return HttpResponse(json.dumps(data), content_type='application/json') 
    else: 
     raise Http404 

あなたは、Ajaxのuを追加する必要がありますあなたのurls.pyにRLファイル

url(r'^ajax/send-data-through-ajax/$', views.ajax_data, name = 'ajax-data') 

あなたがここに見つけることができますジャンゴとAJAXを使用して上の

詳細情報：

1. Basic Ajax
2. Django by Example
3. Django JavaScript Integration: AJAX and jQuery