如何讓表單在Django中使用Jquery/Ajax彈出？

我有一個網頁上的按鈕，我想單擊時彈出一個窗體。問題是，我不知道如何通過ajax傳遞html的信息。我可以順利通過數據庫信息與阿賈克斯像這樣：如何讓表單在Django中使用Jquery/Ajax彈出？

查看：

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信息，同時使其彈出。我正在尋找一個教程或一些指導，所以我可以做到這一點。謝謝。

來源

2017-05-10 GreenSaber

我沒不完全明白你想要什麼，但如果你想要根據源窗口的輸入來設置彈出窗體，您應該查看[此鏈接]（https://www.w3schools.com/jsref/prop_win_opener.asp）。 –

這就是想法，但我想知道是否有可能與Ajax做，因爲我需要發送數據庫信息到它 – GreenSaber

@Evan你需要發送信息從數據庫形式或其他方式？ – doru

您應該使用模態，最簡單的方法是使用包含模態插件的引導框架。
可能你想要類似this的東西。在頁面上有一個按鈕，當點擊時彈出一個模式，在模態中你有一個表單和另一個按鈕，點擊後，使用AJAX將表單數據發送到處理程序視圖。
要發送數據視圖，你必須使用post方法在你的AJAX代碼，當您使用post你必須發送一個crsftoken Django的驗證形式。

比方說，你有阿賈克斯/ajax/send-data-through-ajax/使用的URL和表單的提交按鈕有一個類send-data和帶班name-data和pass-data兩個輸入字段比你可以通過AJAX發送這個數據像這樣：

$(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û RL您urls.py文件

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

使用Django和AJAX你可以在這裏找到更多信息：

來源

2017-05-10 20:02:06 doru

如何讓表單在Django中使用Jquery/Ajax彈出？

回答

相關問題