Question

我正在实现Django应用程序的一个功能，其中我有一个表单，提交用户的输入进行api调用，返回我解析并在页面上显示的JSON响应。查询结果显示在我通过迭代每个对象创建的列表中。在每个列表元素中，我有一个按钮，当单击时打开一个模态窗体。此表单包含电子邮件收件人的字段，全名以及用户在单击提交和发送电子邮件之前可以指定的消息。提交表单后，我需要在表单中附加一些额外的数据，以便将其发送到服务器端并添加到电子邮件中。

我看过像this这样的帖子似乎做了类似的事情;然而，问题是jquery中的事件处理程序需要知道它需要哪个列表元素来获取数据意味着它必须知道循环的当前迭代才能获得正确的信息。

我应该如何实施？

以下是根据从服务器端返回的数据制作列表的代码：

var venues = {{venues|safe}};
var dates = {{raw_dts|safe}};
var ticket_statuses = {{ticket_statuses|safe}};
var ticket_urls = {{ticket_urls|safe}};
console.log("length of artist list" + venues.length);
var $list = $("<ul  class='list-group'>");
for(var i = 0; i < venues.length; i++){

    $list.append("<li class='list-group-item'>Artist: {{form_artistSelect}}  Location: " + venues[i].city + ', ' + venues[i].region +' Venue: ' + venues[i].name + 
       "Date: " + dates[i] + "tickets status: " + ticket_statuses[i] + "<br><a href = '" + ticket_urls[i] +"'" + "> ticket link</a>  "+
       "{% if user.is_authenticated %}"+
    "<button id ='invite'type='button' class='btn btn-info btn-lg' data-toggle='modal' data-target='#myModal' venue= " +venues[i] +" date = "+ dates[i] +
    "ticket_url = "+ticket_urls[i]+" artist = {{form_artistSelect}} >Invite a friend</button>  <button id = 'save' type='button' class='btn btn-" + 
    "primary-outline'> Save concert</button> "+
        "{% endif %}"+
            "</li>"); 
}

这是附加数据的jquery函数的shell：

$list.appendTo($("#container"));
$("#mform").submit(function()){
    $('<input />').attr('type','hidden')
        .attr('')
}

编辑：

如果不清楚，我特别需要发送用户在模式表单中输入的数据，其中包含ticket_urls，venues，dates的值。每个数组的位置，对应于按钮在列表中的位置。这些数组中的每一个都使用与在服务器端解析JSON时相同的数据排序结构。对于dates数组，您具有此结构var dates = ["2016-03-18T12:00:00", "2016-03-19T12:00:00", "2016-03-20T12:00:00"]，其中第一个日期显示在第一个列表元素中，第二个日期显示在第二个列表元素中，依此类推。因此，例如，如果单击第二个列表元素中的按钮，我需要将表单数据与每个数组的第二个位置中的每个值一起发送。

我在考虑以某种方式在原始循环中执行此操作，但我不认为这是可能的。我该怎么做呢？

从views.py查看

 def search(request):
    queryform = SearchForm(request.POST or None)
    modalform = ModalForm(request.POST or None)
    #print "query form is valid = " + str(modalform.is_valid())
    if queryform.is_valid():
        form_artistSelect = urllib2.quote(queryform.cleaned_data.get("artist_select"))
        form_city =   urllib2.quote(queryform.cleaned_data.get("city"))
        form_state = urllib2.quote(queryform.cleaned_data.get("state"))
        mile_radius = urllib2.quote(queryform.cleaned_data.get("radius"))

        #print "testing"
        url = "http://api.bandsintown.com/artists/" + form_artistSelect + "/events/search.json?api_version=2.0&app_id=YOUR_APP_ID&location=" +form_city+","+ form_state+"&radius="+ mile_radius
        data = json.load(urllib2.urlopen(url))

        #url = "http://api.bandsintown.com/events/search?artists[]=" + form_artistSelect + "&location=" +form_city+","+ form_state+"&radius="+ mile_radius + "&format=json&app_id=YOUR_APP_ID"

        context = {
            "queryform" : queryform,
            "modalform" : modalform,
            "data": data
        }
    else:
        context = {
            "queryform" : queryform 

        }

    if modalform.is_valid():
        form_recipient = modalform.cleaned_data.get("rec_email")
        form_message = modalform.cleaned_data.get("message")
        form_recname = modalform.cleaned_data.get("rec_name")
        print form_recipient
        print form_message
        print form_recname
        concert_venue = modalform.cleaned_data.get("additionalValues[venue]")
        concert_date= modalform.cleaned_data.get("additionalValues[uf_date]")
        concert_url = modalform.cleaned_data.get("additionalValues[ticket_url]")
        artist = modalform.cleaned_data.get("additionalValues[artist]")
        print "concert venue"
        print concert_venue
        print "concert date"
        print concert_date
        print "concert_url"
        print concert_url
        print "artist"
        print artist

    return render(request,"searchform.html" , context)

将存储邀请的模型

class Invite(models.Model):
    sender = models.ForeignKey(User, related_name= "invite_sender", on_delete = models.CASCADE)
    #recipient = models.ForeignKey(User, related_name= "invite_recipient", on_delete = models.CASCADE)
    recipient = models.EmailField()
    concert = models.ForeignKey(Concert, on_delete = models.CASCADE)
    artist = models.ForeignKey(Artist, on_delete = models.CASCADE)
    message = models.CharField(max_length = 120, blank = True, null = True)
    date_sent = models.DateTimeField(auto_now_add = True, auto_now = False)

forms.py中的相关表单

class SearchForm(forms.Form):
    artist_select = forms.CharField()
    city = forms.CharField()
    state = forms.CharField()
    radius = forms.CharField()


class ModalForm(forms.Form):
    rec_email = forms.CharField()
    message = forms.CharField()
    rec_name = forms.CharField()

模板中的Ajax调用

$("#mform").submit(function(){
    var c = getCookie('csrftoken');
    //var data1 = $().attr("");
    var extraData = [];
    extraData['venue'] = $("invite").attr("venue");
    extraData['artist'] = $("invite").attr("artist");
    extraData['f_date'] = $("invite").attr("formatted_date");
    extraData['uf_date'] = $("invite").attr("date");
    extraData['ticket_url'] =  $("invite").attr("ticket_url");
    extraData['city'] = $("invite").attr("city");
    extraData['region'] = $("invite").attr("region");
    extraData['artist'] = $("invite").attr("artist");
    $ajax({
        context:this,
        type : 'POST',
        dataType: 'json',
        url: '/artistsearch/',
        data: {
            csrfmiddlewaretoken: c,
            //data_form: data1,
            additionalValues: extraData

        },
        success: function(response){}
    });
});

Answer 1

上面提供的代码似乎是Django和JQuery的奇怪合并。

据我所知：

Django和JQuery在不同阶段工作。 Django首先渲染HTML，然后JQuery生效。
通过Django渲染重复HTML代码比通过JQuery（我相信你试图这样做）更有效。

以下是您在Django模板中可以使用的内容：

<强> xyz_template.html

{% load staticfiles %}
<html>
    <head>
        <script src="path_to/ajaxpostcsrf.js"></script>
    </head>
    <body>
        <ul  class='list-group'>
            {% for i in range(0,len_venues) %}
               <li class='list-group-item'>
                   Artist: {{form_artistSelect}} 
                   Location: {{venues.i.city}}, {{venues.i.region}} 
                   Venue: {{venues.i.name}} 
                   Date: {{dates.i}} 
                   tickets status: {{ticket_statuses.i}} <br>
                   <a href = {{ticket_urls.i}}> ticket link </a>

                   {% if user.is_authenticated %}
                      <button id ='invite'type='button' class='btn btn-info btn-lg' data-toggle='modal' data-target='#myModal' venue={{venues.i}} date={{dates.i}} ticket_url={{ticket_urls.i}} artist={{form_artistSelect}}> Invite a friend </button>  
                      <button id = 'save' type='button' class='btn btn-primary-outline'> Save concert </button>
                   {% endif %}
               </li> 
            {% endfor %}
        </ul>
    </body>
</html>

通过传递相关的上下文变量来渲染模板（在上面给出的行上），如下所示：

<强> views.py

def abc_view(request):
    template = 'xyz_template.html'
    return render_to_response(template,
                             {'user': <user_object>,
                              'len_venues': len(venues.objects.all()),
                              'form_artistSelect': <artist>,
                              'venues': venues.objects.all(),
                              'dates': <dates_array>,
                              'ticket_statuses': <ticket_status_array>,
                              'ticket_urls': <ticket_urls_array>
                             },
                             context_instance=RequestContext(request))

渲染模板后，您可以使用AJAX发送额外数据以及表单提交（在下面给出的行上）：

<强> javascript_file.js

$("#mform").submit(function()){
    var c = getCookie('csrftoken');    
    //Need to add an ajaxpostcsrf.js and call in your html file to use this    
    //--> basically use your way of sending the csrf_token 

    var data1 = $("<pick relevant tag>").attr("<pick relevant data-attr>");
    //save additional data to be added in a variable
    var data2 = $("<pick relevant tag>").attr("<pick relevant data-attr>");
    $.ajax({
        context: this,
        type: 'POST',
        dataType: 'json',
        url: '/your_specific_URL/',
        data: {
              csrfmiddlewaretoken: c,
              data_form: data1,
              data_additional: data2            
        },
        success: function(response) {}
    });
});

<强> ajaxpostcsrf.js

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; 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;
}

$.ajaxSetup({       
    headers: { "X-CSRFToken": getCookie("csrftoken") }

});

Answer 2

如果我正确地回答你的问题：

如果要显示要添加的元素，除模型属性外，还可以在ModalForm类中定义它们。
如果您需要使用表单发送数据而不将其显示给用户。我认为如果您可以将数据作为视图级别检索，则没有必要。我的意思是你认为你做的如下：

if form.is_valid():
    form_data = form.cleaned_data
    additional_data = # here you get your data, eventually through Queryset
    # ... continue processing your data here
    #

附加额外数据以形成请求

编辑：

2 个答案: