Django Отправить вывод с помощью Ajax, но Javascript не работает

Question

Я хочу запросить базу данных и показать результат, а не обновить страницу. Поэтому я использую Ajax! Но когда я добавляю или вставляю HTML-код, JavaScript не работает. Стиль моего стола такой уродливый.

Это часть таблицы html, вывод которой будет здесь (ID = output):

<div class='fresh-table' id="output">
    <div class='toolbar'>
        <button type='button' id='alertBtn' class='btn btn-info'>Add To Cart</button>
    </div>
    <table id='fresh-table' class='table'>
        <thead>
            <th data-field='state' data-checkbox='true'></th>
            <th data-field='id' data-sortable='true'>id</th>
            <th data-field='name' data-sortable='true'>candidate</th>
            <th data-field='salary' data-sortable='true'>salary</th>
            <th data-field='gpa' data-sortable='true'>gpa</th>
            <th data-field='position'>position</th>
            <th data-field='actions' class='td-actions text-right' data-formatter='operateFormatter' data-events='operateEvents'>Actions</th>
        </thead>
        <tbody>
            {% for candidate in Candidate %}
            <tr data-val='{{candidate.id_number}}'>
                <td></td>
                <td><a href='/filter/{{candidate.id_number}}/' style='color: #ff9800; font-weight: 400;'>{{candidate.id_number}}</a></td>
                <td>{{ candidate.name_title }} {{candidate.firstname}} &nbsp&nbsp {{candidate.lastname}}</td>
                <td>{{candidate.salary}}</td>
                <td>{{candidate.nowEdu_gpa}}</td>
                <td>{{candidate.position}}</td>
                <td></td>
            </tr>
            {% endfor%}
        </tbody>
    </table>
</div>

Это Ajax в шаблоне:

$.ajax({
    type: 'POST',
    url: 'testajax/',
    dataType: "json",
    async: true,
    data: {
        filter_option: json_filter_option,
        operator_position: json_operator_position,
        filter_position: json_filter_position,
        csrfmiddlewaretoken: "{{ csrf_token }}"
    },
    success: function(json) {
        console.log(json.message)
        html = "<div class='toolbar'> <button type='button' id='alertBtn' class='btn btn-info'>Add To Cart</button></div><table id='fresh-table' class='table'><thead><th data-field='state' data-checkbox='true'></th><th data-field='id' data-sortable='true'>เลขประจำตัวประชาชน</th><th data-field='name' data-sortable='true'>ชื่อผู้สมัคร</th><th data-field='salary' data-sortable='true'>เงินเดือนที่คาดหวัง</th><th data-field='gpa' data-sortable='true'>เกรดเฉลี่ยสะสม</th><th data-field='position'>ตำแหน่งที่สมัคร</th><th data-field='actions' class='td-actions text-right' data-formatter='operateFormatter' data-events='operateEvents'>Actions</th></thead><tbody>";
        $.each(json.message, function(index, candidate) {
            html += "<tr data-val='" + candidate[0] + "'><td></td><td><a href='/filter/" + candidate[0] + "/' style='color: #ff9800; font-weight: 400;'>" + candidate[0] + "</a></td><td>{{ candidate.name_title }} {{candidate.firstname}} &nbsp&nbsp {{candidate.lastname}}</td><td>{{candidate.salary}}</td><td>{{candidate.nowEdu_gpa}}</td><td>{{candidate.position}}</td><td></td></tr>";
        });
        html += "</tbody></table>";
        $('#output').html(html);
    }
})

Пожалуйста, помогите мне. Этот проект очень важен для меня.

Используемый мной стиль таблицы: https://www.creative -tim.com / product / fresh-bootstrap-table

Это мой view.py

def test_ajax(request):
    if request.method == 'POST':
        print("Entryy")
        filter_option = json.loads(request.POST.get('filter_option'))

        operator_position = json.loads(request.POST.get('operator_position'))
        filter_position = json.loads(request.POST.get('filter_position'))
        print("filter_option",filter_option)
        print("operator_position",operator_position)
        print("filter_position",filter_position)

        all_candidate = CandidateBasic.objects.all().values_list('id_number')
        response_data = {}
        try:
            response_data['result'] = "Success"
            response_data['message'] = list(all_candidate)
            print(response_data)

        except Exception as e:
            response_data['result'] = "Fail"
            response_data['message'] = "Fail!"
    return HttpResponse(json.dumps(response_data), content_type="application/json")

Answer 1

Это может быть только начало, но в вашем AJAX $.each вы заполняете много данных, но фактически ничего с ними не делаете. Все, что вы помещаете на свою страницу в HTML, это ваш html, в котором, похоже, нет view context. Может быть, вы хотите использовать JsonResponse вместо HttpResponse