Ajax 调用不更新模板 django

Posted 2023-02-24

【中文标题】Ajax 调用不更新模板 django

【英文标题】：Ajax call not updating template django

【发布时间】：2019-02-05 18:15:29

【问题描述】：

以下是详细信息。我能够在更改选择选项时在视图中获得更新的“Question_in_topic”变量i.e.Sjax调用。 Ajax 调用正在根据下拉列表中的选定值更新“questions_in_topic”变量。但是这些变化并没有反映在模板中。即在模板上，我仍然得到旧值。

urls.py

url(r'^interview/add/questions/library', recruiter_views.add_question_library, name='add_question_library'),

views.py

def add_question_library(request):
    question_topics = QuestionTopic.objects.values('question_id__description', 'topic_id__name','question_id','topic_id').order_by('topic_id__name','question_id__description')
    all_topics = Topic.objects.all()
    questions_in_topic = QuestionTopic.objects.values('question_id__description').order_by('question_id__description')

    if request.is_ajax():
        if 'topicId' in request.POST:
            print("xx")
            questions_in_topic = QuestionTopic.objects.filter(topic_id=request.POST['topicId']).values('question_id__description').order_by('question_id__description')
        else:
            print("yy")
            questions_in_topic = QuestionTopic.objects.values('question_id__description').order_by('question_id__description')

    print(questions_in_topic)
    context =  'question_topics': question_topics, 'all_topics': all_topics,'questions_in_topic':questions_in_topic,
    return render(request, 'recruiter/add_question_library.html', context)

add_question_library.html

<select id="topic" name="topic_list" class="form-control topic_select">
              % for topic in all_topics %
               <option data-topic="topic.id" value="topic.name">topic.name</option>
              % endfor %
            </select>    
<ul class="list-unstyled">
            % for x in questions_in_topic %
            <li class="list-unstyled"> x.question_id__description </li>
            % endfor %
            </ul>

ajax

var topicId = $(".topic_select option:selected").attr("data-topic");
    $(".topic_select").change(function()
      var topicId = $(".topic_select option:selected").attr("data-topic");
      $.ajax(
          type: "POST",
          url: "% url 'recruiter:add_question_library' %",
          data: 
            topicId: topicId,
            'csrfmiddlewaretoken': ' csrf_token ',
          ,
          success: function()
              // alert("Showing questions from topic " + topicId);
          
      );
    );

【问题讨论】：

在 ajax 调用之后要替换的 DOM 部分是什么？

% for x in questions_in_topic % x.question_id__description % endfor %

您只需要成功检索响应：success: function(response) response is here

谢谢，成功了

【参考方案1】：

在 ajax 调用之后请求来自视图，您可以这样做：

// stuff
success: function(response)
   // $("taget").replaceWith($("target",response));
   $("ul.list-unstyled").replaceWith($("ul.list-unstyled",response));

您的项目中可能有多个ul.list-unstyled，建议您在列表中添加唯一ID。

【讨论】：

在这种情况下，请把答案标记为正确。