使用AJAX检索Django表单字段值

时间:2017-10-12 20:30:07

标签: ajax django

对于事实上的每一个事实,都有一种形式可以对事实进行投票或投票。

下面将进一步说明。

模板和表格代码分别列在下面:

模板

<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 检索此特定事实的值,并相应地更新模型,而不离开/刷新页面

1 个答案:

答案 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...');
                    }
                });
            }