如何编写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);  
     }); 
    }); 
} 

这么说，你可能不想分配每次输入焦点时，点击处理程序。我会把它移出焦点处理程序。