jquery - 如何使用ajax从数据库中在div区域的前端显示内容？

Question

我想在点击 "Get Reports" 按钮下方的 "Get Reports" 按钮后显示内容，即 #search-results区域。数据将根据所选日期的内容进行过滤。(请参阅屏幕截图)。

实际结果:我在开发者工具中得到了预期的结果，而不是在 "#search-results" 部分。

 #views.py
from django.shortcuts import render, get_object_or_404,render_to_response
from .models import Statusreport


 def statusreport(request):
    return render(request, "statusreport.html")

 def search_report(request):
   if request.method == 'POST':
     search = request.POST['search']
     print("checkoutput"+search)
   else:
     search = ''

 statusreport = Statusreport.objects.filter(created_date__contains=search)

 print(statusreport)

 return render_to_response("statusreport-detail.html", {'statusreport': 
 statusreport})

   #statusreport.html
        <main class="container">
         < form method="POST">
          {% csrf_token %}
            <div class="row" style="padding-top: 100px">
                <div class="col">
                 <label class = 'control-label' for="datepicker">Select Date: 
                  </label>
              <input data-date-format="yyyy-mm-dd" id="datepicker">
              </br>
           </br>
             <button type="button" class="btn btn-info">GET REPORTS</button>

                </div>
           </div>
        </form>
     </main>

  <script 
     src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
 </script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap- 
   datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
 <script 
  src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
  integrity="sha384- 
  JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
  crossorigin="anonymous"></script>
  <style type="text/css">
       // solution 1:
        .datepicker {
           font-size: 0.875em;
         }


    .datepicker td, .datepicker th {
        width: 1.5em;
        height: 1.5em;
    }

</style>
  <script type="text/javascript">
      $('#datepicker').datepicker({
         weekStart: 1,
         daysOfWeekHighlighted: "6,0",
         autoclose: true,
         todayHighlight: true,
         });
      $('#datepicker').datepicker("setDate", new Date());

    $(document).ready(function(){
       $("button").click(function(){
           $.ajax({
              type : 'POST',
               url: "/statusreport/statusreport-detail/",
              data: {
            'search' : $('#datepicker').val(),
            'csrfmiddlewaretoken' : 
           $('input[name=csrfmiddlewaretoken]').val()
      },
    sucess : searchSuccess,
    dataType: 'html'

      });
    });
  });
 function searchSuccess(data, textStatus, jqXHR)
  {

   $('#search-results').html(data);
   }

</script>

<div id = 'search-results'>


</div>

#statusreport-detail.html
 <table class="table table-bordered " border="1">
 <thead>
 <tr><th>id</th>
 <th>created_date</th>
 <th>taskname</th>
 <th>testrun</th>
 <th>total</th>
 <th>passed</th>
 <th>failed</th>
 <th>blocked</th>
 <th>inprogress</th>
 <th>not_implemented</th>
 <th>not_applicable</th>
  <th>untested</th>
 </tr>
 </thead>

<tbody>

{% for obj in statusreport%}
 <tr>
<td> {{ obj.id }} </td>
<td> {{ obj.created_date }} </td>
<td>  {{ obj.taskname }}  </td>
<td>  {{ obj.testrun }} </td>
<td>  {{ obj.total }} </td>
<td>  {{ obj.passed }} </td>
<td>  {{ obj.failed }} </td>
<td>  {{ obj.blocked }} </td>
<td>  {{ obj.inprogress }} </td>
<td>  {{ obj.not_implemented }} </td>
<td>  {{ obj.not_applicable }} </td>
<td>  {{ obj.untested }} </td>
</tr>

{% endfor %}

</tbody></table>
#urls.py
from django.urls import path

app_name = "statusreport"

from .views import (
 search_report,statusreport
  )

 urlpatterns = [

path('' , statusreport, name = 'statusreport'),
path("statusreport-detail/", search_report, name = 'statusreport-detail')

 ]

该数据需要反射(reflect)在“Get Reports” 的下方。

Answer 1

试试这个....

<button type="button" class="btn btn-info">GET REPORTS</button>

$("#button").click(function(){
    $("#mytable").hide();

    $.ajax({
        url:'/statusreport/statusreport-detail/',
        type: "POST",
        data: "{
                    'search' : $('#datepicker').val(),
                    'csrfmiddlewaretoken' : $('input[name=csrfmiddlewaretoken]').val()
                }"
        dataType: 'json',
        success: function(data){
            $.each(data, function(key, value){
                $("table #mytable1").append("<tr><td>" +
                                    "ID :" + value.ID +
                                    "created_date :"+ value.Name +
                                    "taskname :" + value.Age + 
                                    "</td><tr>");
                                   .........
            });
        }
    });
});