javascript - 将额外数据附加到表单请求

我正在实现 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 函数的外壳:

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

编辑:

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

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

来自 views.py 的 View

 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){}
    });
});

最佳答案

您在上面提供的代码似乎是 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") }

});

关于javascript - 将额外数据附加到表单请求，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34449473/

javascript - 将额外数据附加到表单请求

编辑:

上一篇：javascript - AngularJs:在 Controller 内格式化当前日期

下一篇：javascript - 如何在google maps api中找出区域