使用AJAX检索Django表单字段值

Question

对于事实中的每个事实，都有一个表格，您可以在其中对事实投赞成票或反对票。

以下是进一步的解释。

模板和表单代码分别如下：

模板

<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>

表单.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个输入(向上投票、向下投票)的单选按钮组成，为该特定事实创建。我现在所做的基本上是Django 101：获得被投票的事实的价值，并在视图中相应地更新其模型。

我想做的是使用AJAX检索这个特定事实的值，并相应地更新模型而不离开/刷新页面

Answer 1

我想我能帮你。我刚刚学习了很多AJAX以及如何连接到DJANGO模板。您需要在模板上使用一些javascript来建立AJAX连接。

下面是我从最近的工作中抽象出的一个通用AJAX javascript连接器函数。它需要两个prototype.jshttp://prototypejs.org/和jquery.jshttps://jquery.com/download/导入到要运行的模板中。还需要一个jQuery noconflict语句来允许两者同时运行。

基本上，你所需要做的就是传递AJAX连接器函数。我以｛‘myvariable’：‘myvalue’，‘myvariable2’：‘my value2’｝格式编写了你的数据，目标是指向你的视图的url(字符串格式)。py处理函数处理AJAX数据并返回回复。使用本地(相对)链接作为目的地也很重要。

如果你也想看看的话，我在博客上做了一个小教程——它遍历了模板(javascript端)和服务器(python端)上的AJAX连接http://www.americantechnocracy.com/getArticle/4/

我在下面发布的代码也有更多的描述：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...');
}
});
}