Django中模型值的jquery弹出窗口迭代

from django.urls import path
from . import views

urlpatterns = [
    path('popup/<int:model_id>/', views.popup_view, name='popup'),
]

from django.shortcuts import render
from django.http import JsonResponse
from .models import Model

def popup_view(request, model_id):
    model = Model.objects.get(id=model_id)
    # 根据需要处理模型值的逻辑
    data = {
        'field1': model.field1,
        'field2': model.field2,
        # 其他模型字段
    }
    return JsonResponse(data)

<button id="popup-btn">点击弹窗</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('#popup-btn').click(function() {
            var modelId = 1;  // 根据实际情况获取模型的ID
            $.ajax({
                url: '/popup/' + modelId + '/',
                type: 'GET',
                success: function(data) {
                    // 将返回的模型值填充到弹窗中的相应位置
                    $('#field1').text(data.field1);
                    $('#field2').text(data.field2);
                    // 其他模型字段
                    // 显示弹窗
                    $('#myModal').modal('show');
                }
            });
        });
    });
</script>

<!-- 弹窗 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">模型值弹窗</h4>
            </div>
            <div class="modal-body">
                <p>字段1: <span id="field1"></span></p>
                <p>字段2: <span id="field2"></span></p>
                <!-- 其他模型字段 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>