javascript - 单击模板中的按钮后如何运行 Django View 功能

Question

我制作了一个网页，根据用户通过 API 在 POST 请求中提交的参数来显示音乐会数据的查询结果。 Web 应用程序的用户需要能够将音乐会添加到他们的音乐会列表中或向其他用户发送音乐会邀请。这需要将每场音乐会的信息发送回服务器，以便将其存储在用户的模型中。

在结果列表的每个列表元素中，我有两个按钮，单击它们时将使用 ajax 调用将带有音乐会信息的 POST 请求发送到服务器。目前我只有这两个函数的外壳，因为我不清楚如何发送当前列表项的数据，然后在 View 中启动相应的函数。这是我目前为客户端提供的内容:

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> " + "<button id ='invite'type='button' class='btn btn-primary-outline'>Invite a friend</button>  <button id = 'save' type='button' class='btn btn-primary-outline'> Save concert</button> </li>"); 
}
// var $resultObj = $('<div id = "inviteObj" style="margin:100px"></div>');
// $resultObj.append($divline);
$list.appendTo($("#container"));
$("#save").click(function() {
    $.ajax({
        url: your_url,
        method: 'POST',
        data: {
            name: value,
            click: True
        }
        success:function(data){
        }
    });
});

$("#invite").click(function() {
    $.ajax({
        url: your_url,
        method: 'POST',
        data: {
            name: value,
            click: True
        }
        success:function(data){

        }
    });
});  

在views.py 内部，我有一个 View 函数，用于处理获取JSON 响应并根据从表单请求获取的用户输入将其传递到客户端。这是 View :

def search(request):
    form = SearchForm(request.POST or None)
    if form.is_valid():
        form_artistSelect = urllib2.quote(form.cleaned_data.get("artist_select"))
        form_city =   urllib2.quote(form.cleaned_data.get("city"))
        form_state = urllib2.quote(form.cleaned_data.get("state"))
        mile_radius = urllib2.quote(form.cleaned_data.get("radius"))
        #print "testing"
        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"
        data = json.load(urllib2.urlopen(url))

        #titles = [ i.get("title") for i in data]
        raw_dts = json.dumps([i.get("datetime") for i in data])

        #formatted_dts = [i.get("formatted_datetime") for i in data]
        ticket_urls = json.dumps([i.get("ticket_url").encode("utf-8") for i in data])
        ticket_statuses = json.dumps([i.get("ticket_status").encode("utf-8") for i in data])
        venues = json.dumps([i["venue"] for i in data])
    context = {
            "form" : form,
            "form_artistSelect" : form_artistSelect,
            "raw_dts" : raw_dts,
            "ticket_urls" : ticket_urls,
            "ticket_statuses" : ticket_statuses,
            "venues" : venues,
        }
    else:
        context = {
            "form" : form   

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

具体来说，我有几个问题

由于该 View 是我在该页面上唯一的 View ，我是否应该为每个按钮单击事件添加其他 View 功能？另外，将每个音乐会列表项的数据发送到服务器端的 python 是否可以为每个用户保存数据？

Answer 1

我会添加两个 View

• 邀请音乐会
• 保存音乐会

每次点击时，您都可以为该 View 使用正确的 URL，如果您不需要任何回复，该 View 可以返回一个空的 HttpResponse。对于参数，我有时喜欢将我需要的参数添加到项目的 HTML 中，例如

data-concert-id=venues[i].id

但也许您的列表项中已经有了所有必需的数据。无论如何，您可以检索它们并在 ajax 调用的数据对象中轻松使用它们，例如:

{concert-id : $(this).attr('data-concert-id')