将AJAX响应格式转换为HTML [关闭]

Question

我正在使用最新版本的Wordpress。在私人页面上，我在下拉列表中创建了我的第一个过滤器字段。过滤器选项是从自定义表中查询的不同年份。这里没有问题。

更改过滤器字段会触发使用jQuery的后端AJAX调用。然后，php-backend上的callbackfunction在数据库上运行2个查询：1.从定制表中获取一个或多个条目的日历周2.每周获取条目

问题：第二个查询针对第一个查询的每个结果运行。因此，它嵌套在一个循环中。但是我也需要显示第一个值。

[我已经尝试过：将所有查询的输出连接到一个php字符串中，包括每个条目的html-wrapper-classs，然后使用该字符串作为AJAX响应。但是，此尝试包括不可打印的内容（ n或 t）。我需要保持输出可读以对其进行编辑。实际上并没有像html这样格式化。

我的问题：

应该在回调中将AJAX响应的格式设置为HTML功能？以及如何显示在前端？
AJAX响应应该只是一个JSON对象吗？以及如何将第二个查询的条目映射到第一个查询的条目在前端？

这是最基本的ajax调用的当前代码：

            var filter = $('#filter');

            $.ajax({
                url:filter.attr('action'), // ajax
                data:filter.serialize(), // form data
                type:filter.attr('method'), // POST
                dataType:"html",
                success:function(data){

                    $('#json-response').html(data);

                    //TBD: Properly display data of response
                }
            });

预期的伪HTML输出将类似于以下内容：

<div class="week-container">
    <div class="week-header">
        CALENDAR WEEK 1 <-- Result from first query
    </div>
    <div class="week-entry-0">01.01.2020, ... more data</div> <-- Result from second query
    <div class="week-entry-1">03.01.2020, ... more data</div> <-- Another result from second query
</div>
<div class="week-container">
    <div class="week-header">
        CALENDAR WEEK N
    </div>
    <div class="week-entry-i">data</div>
    <div class="week-entry-i+1">data</div>
</div>
and so on...