Django 使用 Ajax 发送输出但 Javascript 不起作用

Question

我想查询数据库并显示结果不要刷新页面。所以我使用Ajax！但是当我附加或粘贴 html 代码时，javascript 不起作用。我的桌子样式好难看。

这是输出将在这里的表格 html 部分（ID=输出）：

<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

这是我的观点.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