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

我正试图用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>

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

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

返回要加载的数据的视图

• 有很多方法可以表示数据，但为了保持简单，我将使用HTML

加载该视图的Javascript（如果愿意，可以使用JQuery）

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

url.py:

...

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

...

...

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

...

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

...

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

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

...

视图。py:

...

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

...

...

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

...

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

...

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

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

...

subjects\u template.html:

...

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

...

...

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

...

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

...

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

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

...

{%用于主题中的主题%}
{{subject.name}
{%endfor%}

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

main\u template.html:

...

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

...

...

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

...

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

...

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

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

...

。。。

函数loadSubjects（）{
$.ajax({
url:“/获取主题”，
成功：功能（数据）{
$（“#主题列表”）.html（数据）；
}
});
}
...

[1]

[2]

这会让你最容易到达那里。要重新加载列表时，可调用

loadSubjects（）

函数

就创作主题而言，这是另一回事。您要研究的是如何在不离开页面的情况下提交HTML表单。有很多工具和库可以通过一个好的api来完成这些工作。如果你想坚持jQuery，你可以考虑一个更好的API。