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 を使用)

コードの最初の部分は次のようになります。

urls.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})

...

subject_template.html:

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

2 番目の部分については、次のようになります。

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 に答える