如何编写 JQuery 函数以在 Django 模板的特殊位置显示文本

Question

我正在尝试在 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")

Answer 1

function create_subject() {
    $("input").focus(function(){
        var subject = $(this).val();
        $(".btn-create").click(function(){    
            $('#subjects-list').append(subject);    
        });
    });
}

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

Answer 2

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

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

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

urls.py:

...

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

...

views.py：

...

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

...

subjects_template.html：

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

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

ma​​in_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，你可以考虑this plugin 以获得更好的 api。