Chcę przedstawić ramkę do przodu, dzięki czemu mogę utworzyć tabelę na mojej stronie HTML.

Zwykle, jeśli używam prostego renderowania (bez AJAX obejmuje), przesyłam go do listy danych JSON, a następnie przenosić go na stronę HTML:

my_function.py:
def df_to_json(df):
    json_records = df.reset_index().to_json(orient ='records') 
    data = [] 
    data = json.loads(json_records)
    return data 

Dane JSON wyglądają tak:

[{"category":0, "sales":135, "cost": 197, "em_id":12},
{"category":0, "sales":443, "cost": 556, "em_id":12},
{"category":2, "sales":1025, "cost": 774, "em_id":15},...]

Następnie w moim widoku.py i oparciu.HTML Strona:

views.py:
def home(request):
    dict_search = request.GET.get('inputtxt_from_html')
    df = my_function.myfunction1(dict_search)
    df_json = my_function.df_to_json(df)
    return render(request, 'base.html', {'df_json': df_json})

based.html:
<div class="container">
    <table class="table table-dark table-striped" id='table1'>
        <tbody>
        {% if df_json%}
        {% for i in df_json%}
            <tr>
                <td>{{i.sales}}</td>
                <td>{{i.cost}}</td>
                <td>{{i.em_id}}</td>
            </tr>
        {% endfor %}
        {% endif %}
        </tbody>
    </table>
</div>

Problemem jest teraz, że chcę zrobić coś w rodzaju powyżej, ale tym razem wejście pochodzi z AJAX.

I wydaje się, że nie mogę bezpośrednio uzyskać wyniki renderowania {{DF_JSON}} dla mojej strony HTML. Próbowałem zrobić coś w "sukcesie:" części mojego Ajax, ale pokazuje "obiekt" lub po prostu tekst.

Jak kod powinien być kodu w "Sukces:", aby uzyskać cały {{DF_JSON}}, dzięki czemu nie muszę zmieniać strony mojej strony? Lub w pierwszej kolejności muszę zrobić coś innego we wszystkich stronach, na podstawie stron AJAX?

my_ajax.js:
$(document).ready(function(){
    $("#button1").click(function() {
        $.ajax({
            url: '',
            type: 'GET',
            data: {
                inputtxt_from_html: $("#input_field").val()
            },
            success: function(response){
                -- I don't know how to write. belowing is just example
                $("#table1").append('<li>' + response.json_dict + '</li>')
            }
        });
    });
});

Nowy widok.py:

def home(request):
    dict_search = request.GET.get('inputtxt_from_html')
    if request.is_ajax():
        df = my_function.myfunction1(dict_search)
        df_json = my_function.df_to_json(df)
        return JsonResponse({'df_json': df_json}, status=200)
    return render(request, 'base.html')

Dziękuję Ci

2
codingsnake99 21 listopad 2020, 20:45

1 odpowiedź

Najlepsza odpowiedź

Możesz użyć .each pętla, aby iterować wartości za pomocą wartości JSON i generuj swoje trs td za pomocą wartości z tablicy JSON przy użyciu value.keyname a następnie dołącz ten generowany HTML do swojego table.

Kod demonstracyjny :

//suppose this your json response
var response = [{
    "category": 0,
    "sales": 135,
    "cost": 197,
    "em_id": 12
  },
  {
    "category": 0,
    "sales": 443,
    "cost": 556,
    "em_id": 12
  },
  {
    "category": 2,
    "sales": 1025,
    "cost": 774,
    "em_id": 15
  }
]
$(document).ready(function() {
 /*$("#button1").click(function() {
      $.ajax({
       url: '',
       type: 'GET',
       data: {
         inputtxt_from_html: $("#input_field").val()
       },
       success: function(response) {*/
  var html = '';
  //loop through json array
  $(response).each(function(index, value) {
    html += "<tr><td>" + value.sales + "</td><td>" + value.cost + "</td><td>" + value.em_id + "</td></tr>" //append datas in tr
  })
  $("#table1 tbody").append(html) //add generated html in table1
  /* }
    });
  });*/
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <table class="table table-dark table-striped" id='table1'>
    <tbody>

      <tr>
        <td>{{i.sales}}</td>
        <td>{{i.cost}}</td>
        <td>{{i.em_id}}</td>
      </tr>

    </tbody>
  </table>
</div>
1
Swati 22 listopad 2020, 06:45