2

我正在尝试在 Django 中创建我的第一个 ajax 函数。我想使用 JQuery 更改我的代码，这个想法很简单：用户输入一个主题名称，该名称显示在表单下方的主题列表中，

问题是我真的不知道在 JQuery 函数中输入什么。

JQuery:
function create_subject() {
    $("input").focus(function(){
        var subject = $(this).val();
        $(".btn-create").click(function(){

            /* What I need to write in here */

        });
    });
}

在 HTML 中，“主题”指的是数据库。

 HTML 
    <div id="subjects-list">
                    {% if user.username %}
                        <ul>
                            {% if subjects %}
                                <form method="post" action=".">{% csrf_token %}
                                {% for subject in subjects %}
   -------- TYPED TEXT SHOULD BE HERE -------->         <li><a href="/user/{{ user.username }}/subject/{{ subject.name }}/">{{ subject.name }}</a></li>
                                {% endfor %}
                                </form>
                            {% else %}
                                <p>No Subjects for this user</p>
                            {% endif %}
                        </ul>
                    {% else %}
                            You are in else
                    {% endif %}
                </div>

这就是 HTML 在“查看页面源代码”中的外观

    <div id="create-subject">
        <form method="post" action="."> <div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='cfbd1893742c3ab9936bacaae9653051' /></div>
            <p><label for="id_name">Subject Name:</label> <input id="id_name" type="text" name="name" size="9" /></p>
            <input type="button" name="subject-create-b" value="Create Subject" class="btn-create"/>
        </form>
    </div>


    <div id="subjects-list">

            <ul>

                    <form method="post" action="."><div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='cfbd1893742c3ab9936bacaae9653051' /></div>

                        <li><a href="/user/r/subject/Math 140/">Math 140</a><span id="subject-link"></span></li>

                    </form>

            </ul>

    </div>
</div>

这就是我的形式

forms.py
class SubjectCreationForm(forms.Form):
    name = forms.CharField(label="Subject Name", widget=forms.TextInput(attrs={'size':9}))

    class Meta:
        exclude = ('created_by', 'created_time', 'num_of_followers', 'vote')
    def clean_name(self):
        name = self.cleaned_data['name']
        if len(name)>1:
            return name
        else:
            raise forms.ValidationError("Subject name should be longer")
4

2 回答 2

2

为了做（我认为）您想做的事情，即使用 Django 作为后端的一些基本 AJAX，您需要以下内容：

  1. 返回要加载的数据的视图
    • 有很多方法可以表示数据，但为了简单起见，我将使用 HTML。
  2. 加载该视图的 Javascript（如果您愿意，可以使用 JQuery）

您的代码在第一部分可能如下所示：

网址.py：

...

(r'^get-subjects/$', 'yourapp.views.get_subjects'),

...

视图.py：

...

def get_subjects(request):
    subjects = # code to fetch your subjects.
    return render_to_response('subjects_template.html', {'subjects': subjects})

...

主题模板.html：

{% for subject in subjects %}
    <li>{{ subject.name }}</li>
{% endfor %}

对于第二部分，它可能如下所示：

main_template.html：

...

<ul id="subjects-list"></ul>

<script>
function loadSubjects() {
    $.ajax({
        url: "/get-subjects",
        success: function (data) {
            $("#subjects-list").html(data);
        }
    });
}
</script>

...

[1] render_to_response()

[2] jQuery.ajax()

这将使您最容易到达那里。当你想重新加载列表时，你调用这个loadSubjects()函数。

至于创建主题，那是另一回事。您需要研究的是如何在不离开页面的情况下提交 HTML 表单。有很多工具和库可以用一个不错的 api 来做这些事情。如果你想坚持使用 JQuery，你可以考虑这个插件以获得更好的 api。

于 2012-08-11T04:47:58.483 回答
1 
function create_subject() {
    $("input").focus(function(){
        var subject = $(this).val();
        $(".btn-create").click(function(){    
            $('#subjects-list').append(subject);    
        });
    });
}

也就是说，您可能不想在每次输入焦点时都分配点击处理程序。我会把它移出焦点处理程序。

于 2012-08-11T01:58:37.957 回答