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

2 回答

• 0

  我希望尽可能远离原始的POST数据，让表单API完成繁重的工作 . 你可以用更安全的方式用更少的代码完成你已经拥有的东西 .

  创建一个包含四个BooleanFields的表单，这些BooleanFields是为模型中的BooleanFields命名的 . 您可以使用label变量覆盖它们在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
      });
  });
  

  提交表单并进行验证后，请使用cleaning_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); . 您可以在FormView上调用 self.render_to_response ，而不是调用json响应 .

  回复于 2024-04-28T20:02:31+08:00
• 1

  也许您可以尝试在视图中渲染模板，然后在div中加载渲染的数据 .

  假设你的 posts/posts_results.html 是：

  <ul>
  {% for post in posts %}
      <li> Post: {{post.name }} / Author: {{post.author}} / Date: {{post.created_at}}</li>
  {% endid %}
  <ul>
  

  在您的视图中，在您执行相应操作时，您可以呈现模板并将html内容添加到响应中，即（基于您当前的代码）：

  def filter(request):
      if request.method=='GET':
          json_data = {
              "success": False,
              "message": "Some message",
              "result": "some result",
          }
          posts = Post.object.all()
          template = "posts/posts_results.html"
  
          things_to_render_in_your_template = {
              "posts": posts, # you can add other objects that you need to render in your template
          }
  
          my_html = get_template(template)
          html_content = my_html.render(things_to_render_in_your_template)
  
          # here the html content rendered is added to your response
          json_data["html_content"] = html_content
          json_data["success"] = True
          return JsonResponse(json_data)
  

  然后在你的JS中，在检查ajsx响应的瞬间，你可以将渲染的内容添加到div中

  $.ajax({
  
          url: '/posts/type_lesson/',
          dataType: 'json',
          type: "GET",
          data: {
              group: groupChecked,
              webcam: webcamChecked,
              home: homeChecked,
              move: moveChecked,
              distance: distance,
          },
          success: function (response) {
              # response is the json returned from the view, each key defined in your json_data dict in the view, is a key here too 
  
              # now insert the rendered content in the div
              $('#posts_results').html(response["html_content"]);
              alert('after');
          }
  
      });
  

  我建议你不要一个一个地创建数据到你的ajax请求，使用 serialize 方法的jquery或者创建一个 FormData 对象，而不是GET，使用POST来做你的请求更安全

  回复于 2024-04-28T20:02:31+08:00