無刷新提交在Django

-1

我有一個HTML表單並提交按鈕（添加或移除在manytomanyfield 「用戶」的關係）：無刷新提交在Django

在views.py

{% if user in event.users.all %} 
    <form action="/event/{{ event.id }}/" method="GET"> 
      <input type="hidden" value="{{ event.id }}" name="remove"> 
      <input type="submit" value="Remove"> 
     </form> 
{% else %} 
    <form action="/event/{{ event.id }}/" method="GET"> 
      <input type="hidden" value="{{ event.id }}" name="add"> 
      <input type="submit" value="Add"> 
     </form>

：

def show_event(request, event_id): 
    ... 
    event = get_object_or_404(Event, id=event_id) 
    user = request.user 
    if request.GET.get('add'): 
     event.users.add(user) 
     event.save() 
    if request.GET.get('remove'): 
     event.users.remove(user) 
     event.save() 
    return render(request, 'events/event.html', {'event':event, 'user':user,})

此功能工作正常，但頁面在提交表單後刷新。我不需要刷新，我需要更改按鈕文本，就像Twitter中的「關注」按鈕。我試圖使用一些jquery \ ajax，但我不完全明白它應該如何工作。可以請任何人解釋如何做到這一點？謝謝。

來源

2016-03-24 worm2d

你可以發佈你嘗試過的ajax/javascript不工作嗎？它產生了什麼錯誤？ –

@CurtisOlson我覺得我嘗試過的東西絕對沒有意義，所以我只是不知道該怎麼做才能讓這個提交按鈕像twitter的按鈕 – worm2d

這是一個非常基本的ajax示例。在你的表格，你可以解僱你的AJAX方法：

<a onclick="AjaxFormSubmit()" href="#">Submit</a>

那麼你的AJAX方法是如下：

function AjaxFormSubmit() { 
    $.ajax({ 
     url : '/event/{{ event.id }}/', 
     type : "POST", 
     data : { the_post : $('#id-of-your-field').val() } 
    }).done(function(returned_data){ 

     // This is the ajax.done() method, where you can fire events after the ajax method is complete 

     // For instance, you could hide/display your add/remove button here 

    }); 
}

我建議看Ajax documentation看到所有的Ajax方法可用您。

另外，在您看來，您需要通過HttpResponse返回（在本例中）json數據。即

return HttpResponse(json.dumps(your_data)) 
# I like to return success/fail Booleans, personally

*注意，這是未經測試的代碼。

來源

2016-03-24 14:28:07

我應該在哪裏放置這個Ajax方法？ – worm2d

您的表格下方或外部.js文件中的某處。如果你使用外部的.js文件，你顯然不能爲'event.id'使用django的模板語法，但是你可以將它作爲參數傳遞給'AjaxFormSubmit' –

這裏的代碼在這裏刪除並且在GET查詢中添加值？ – worm2d

無刷新提交在Django

回答

相關問題