对于事实上的每一个事实,都有一种形式可以对事实进行投票或投票。
下面将进一步说明。
模板和表格代码分别列在下面:
模板
<ul>
{% for fact in facts %}
<form method='POST' action="{% url 'facts:list' fact.pk %}" id="list_vote">
{% csrf_token %}
{{ form }}
<input type="submit" value="vote" />
</form>
{% endfor %}
</ul>
forms.py 代码:
VOTE_CHOICES = [
(1, 'upvote'),
(0, 'downvote')
]
class Vote(forms.Form):
vote = forms.ChoiceField(choices=VOTE_CHOICES,
widget=forms.RadioSelect(attrs={'class': 'vote'}))
对于models.Fact.objects.all()
中的每个事实,都有一个表单,它由2个输入(upvote,downvote)的单选按钮组成,为此特定事实创建。我现在正在做的基本上是Django 101:获得正在投票的事实的价值并在视图中相应地更新其模型。
我想要做的是使用 AJAX 检索此特定事实的值,并相应地更新模型,而不离开/刷新页面
答案 0 :(得分:0)
我想我可以帮助你。我刚刚学习了很多关于AJAX以及如何连接到DJANGO模板的知识。您需要在模板上使用一些javascript来建立AJAX连接。
下面是我从最近的工作中抽象出来的通用AJAX javascript连接器函数。它需要将prototype.js http://prototypejs.org/和jquery.js https://jquery.com/download/导入到您的模板中才能运行。还需要一个jQuery noconflict语句,以允许两者同时运行。
基本上你需要做的就是传递AJAXconnector函数,我将你的数据写入{&#39; myvariable&#39; :&#39; myvalue&#39;,&#39; myvariable2&#39; :&#39; myvalue2&#39;}格式和目标是url(以字符串格式),它指向您的views.py处理函数来处理AJAX数据并返回回复。使用本地(相对)链接作为目的地也很重要。
我在我的博客上做了一些教程,如果你想查看它 - 它遍历模板(javascript端)和服务器(python端)http://www.americantechnocracy.com/getArticle/4/
上的AJAX连接我在下面发布的代码也有更多描述: http://www.americantechnocracy.com/getArticle/9
如果您有疑问,请告诉我。很高兴回答。
// Requires prototype.js
// Requires jquery.js
// enable use of both prototype and jquery
var $j = jQuery.noConflict();
// get the CSRF Token
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;
}
var csrftoken = getCookie('csrftoken');
// function for AJAX communication of data from Template to View.py and back
function AJAXConnector(parameters, destination) {
// myParameters = {'targetPK': pk, };
myParameters = parameters;
csrfHeader = {'X-CSRFToken' : csrftoken};
// This is the start of my AJAX Function
new Ajax.Request(destination, {
method: 'post', parameters: myParameters, requestHeaders: csrfHeader,
onSuccess: function (transport) {
var response = transport.responseText || "no response text";
data = response.evalJSON();
},
onFailure: function () {
alert('Something went wrong...');
}
});
}