javascript - 使用ajax过滤结果时加载部分html页面

Question

我想使用 3 个复选框过滤搜索结果。结果显示在带有 id=posts_results

的 div 中

   <div class="checkbox">
      <label><input type="checkbox" id="id1" class="typePost" value="En groupe"> val1 </label>
   </div>
   <div class="checkbox">
      <label><input type="checkbox" id="id2" class="typePost" value="En groupe"> val2 </label>
   </div>
   <div class="checkbox">
      <label><input type="checkbox" id="id3" class="typePost"  value="A domicile"> val3</label>
   </div>
   <div class="checkbox">
      <label><input type="checkbox" id="id4" class="typePost" value="Par webcam"> val4</label>
   </div>

  <div id="posts_results">

            {% include 'posts/posts_results.html' %}

   </div>


    <script>
        $('.typePost').change(function (request, response) {

        var v1=$('#id1').is(":checked")? 1:0;
        var V2=$('#id2').is(":checked")? 1:0;
        var V3=$('#id3').is(":checked")? 1:0;
        var v4=$('#id4').is(":checked")? 1:0;
        $.ajax({

            url: '/posts/type_lesson/',
            dataType: 'json',
            type: "GET",
            data: {
                group: groupChecked,
                webcam: webcamChecked,
                home: homeChecked,
                move: moveChecked,
                distance: distance,
            },
            success: function (object_list) {

                $('#posts_results').load("my_page.html", object_list);
                alert('after')
            }

        });

    });
   <script>

这是我的网址:

url(r'^filter/$', views.filter, name='filter_type_lesson'),

这是我的观点:

def filter(request):
if request.method=='GET':

    #as an exemple I'll send all posts
    data= PostFullSerializer(Post.objects.all(), many=True)
    return JsonResponse(data.data, safe=False)

过滤器函数根据发送的json数据执行一些过滤器，将过滤后的帖子序列化并发回(本例以发送所有帖子为例)。

结果在 ID 为“posts_results”的 div 中使用 forloop 显示，html 位于文件 posts_results.html 中。

json数据已发送，但ajax成功函数未更新或加载div

也可以留下来

Answer 1

我喜欢尽可能远离原始 POST 数据，让表单 API 来完成繁重的工作。您可以用更少的代码以更安全的方式完成您已经做的事情。

创建一个包含四个 bool 字段的表单，以模型中的 bool 字段命名。您可以使用标签变量覆盖它们在 HTML 中的显示方式。

class TheForm(forms.Form):
    my_field = forms.BooleanField(required=False, label="What I want it to say")
    my_field2 = forms.BooleanField(required=False, label="What I want it to say 2", help_text="Something else")
    my_field3 = forms.BooleanField(required=False, label="What I want it to say 3", help_text="Something else")

输出为<form class="my_form">{% csrf_token %}{{form.as_table}}</form>

用JS提交，如下:

$('.my_form input[type=checkbox]').change(function(e){
    e.preventDefault()
    $.post('module/filer/', $('.my_form').serialize(), function(data) {
        // Handle data
    });
});

提交并验证表单后，采用cleaned_data属性并像这样过滤模型

models = Post.objets.filter(**form.cleaned_data)

这将起作用，因为表单字段和名称与模型中的字段相同。与 Post.objects.filter(my_field=True, my_field2=True, my_field3=False) 相同。然后你就可以用它做任何你想做的事情。我会使用 FormView完成这一切:

class MyView(FormView):
    form_class = TheForm

    def form_valid(self, form):
        models = Post.objets.filter(**form.cleaned_data)
        data= PostFullSerializer(data, many=True)
        return JsonResponse(data.data, safe=False)

现在没有任何东西会自行更新 div。它仅在最初请求 HTML 时创建。在您的成功函数中，您需要像这样手动附加元素:

$('.my_form input[type=checkbox]').change(function(e){
    e.preventDefault()
    $.post('module/filer/', $('.my_form').serialize(), function(data) {
        var post_results = $('#post_results').html(''); // Clear out old html
        $.each(data, function(item) {
            // Create new divs from ajax data and append it to main div
            var div = $('<div>');
            div.append($('<div>').html(item.my_field));
            div.append($('<div>').html(item.my_field2).addClass('something'));
            div.appendTo(post_results);
        });
    });
});

您还可以通过 ajax 过去渲染的 HTML 并执行 $('#post_results').html(data); 。您可以调用 self.render_to_response 而不是调用 json 响应在 FormView 上。