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

How to write JQuery function to display text in special location of Django template

本文关键字：位置 文本 显示 JQuery 何编写 函数 Django      更新时间：2023-09-26

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

为了做（我认为）你想做的事情，即使用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 %}

对于第二部分，它可能看起来像这样：

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。

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

也就是说，您可能不希望每次聚焦输入时都分配单击处理程序。 我会将其移出焦点处理程序。

相关文章：