如何編寫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

爲了做什麼（我覺得）你想要做的是使用Django作爲後端一些基本的AJAX，你將需要：

1. 返回要對數據的視圖加載
   • 有很多方法可以表示數據，但爲了保持簡單，我將使用HTML。
2. （如果你喜歡使用JQuery）Javascript來加載視圖

您的代碼可能看起來像這樣的第一部分：

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，你可以考慮使用this plugin來獲得更好的API。

Answer 2

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

這麼說，你可能不想分配每次輸入焦點時，點擊處理程序。我會把它移出焦點處理程序。