尝试在 AJAX 调用后将一个 html 页面注入另一个页面但返回空白答案

【问题标题】：Trying to inject one html page into another after an AJAX call but returning blank尝试在 AJAX 调用后将一个 html 页面注入另一个页面但返回空白
【发布时间】：2020-10-10 16:57:46
【问题描述】：

我正在尝试将一个带有 django 函数的 html 模板注入到另一个 html 模板中。该函数依赖于对其变量的 AJAX 调用。

我的 AJAX 调用似乎正确触发（在检查 Chrome 开发工具后），但结果未按应有的方式显示在 html 页面上。

这里是 AJAX 调用

//dashboard
$(document).ready(function(){
    console.log('Document Ready')
    $.ajax({
            type: "GET",
             url : '/electra/playlist',
             dataType: "json",
             data: {
                 'venue': 'venue',
                 'list':  'list',
                },
                    success: function(data){
                    $("#playlist").html(data);
                    console.log(data)
                    },
                    failure: function(errMsg) {
                        alert(errMsg);
                    }
                    });
    });

这里是出现Django函数的html文件playlist.html

<!--what is the purpose of this fragmented code?-->
<div class="user_playlists">
  <ul>
    {% for item in playlist %}
      <li>
        <div>
            <h6 class="playlist-name">{{ item.list }}</h6>
            <h6 class="venue-name">{{ item.venue }}</h6>
        </div>
      </li>
    {% endfor %}
  </ul>
</div>

这里是dashboard.html 模板中应该注入playlist.html 函数的部分：

<body>
    {% block content %}
        <div class="container-fluid" style="padding:15px">
          <!--location -->
          <div class="row">
            <div class="col-sm-3">
              <h3 class="list-heading"> Your Playlists </h3>
              <div id="playlist">
              </div>
            </div>
          </div>
        </div>
    {% endblock %}

请注意，我已尝试使用 {% include "playlist.html" %}，如果可以，我想避免这种情况，我还有另外两个 html 模板以类似的方式工作，但没有 django 功能。

这里是views.py，如果它也有帮助的话：

@ensure_csrf_cookie
def dashboard(request):
    return render(request, 'testingland/dashboard.html')

class user_playlist(ListView):
    template_name = 'testingland/playlist.html'
    context_object_name = 'playlist'
    model = UserVenue

    def get_queryset(self):
        venue = self.request.GET.get('venue', None)
        list = self.request.GET.get('list', None)

        return UserVenue.objects.filter(list__user=self.request.user)

【问题讨论】：

标签： html django ajax

【解决方案1】：

你不需要发送 json 类型的数据。因此，只需删除该行就可以了：

    $.ajax({
            type: "GET",
            url : '/electra/playlist',
            // dataType: "json", ---> Remove this line
            data: {
                'venue': 'venue',
                'list':  'list',
            },
            success: function(data){
                $("#playlist").html(data);
                console.log(data)
            },
            failure: function(errMsg) {
                alert(errMsg);
            }
        });
    });

注意：- “弃用通知：jqXHR.success()、jqXHR.error() 和 jqXHR.complete() 回调在 jQuery 3.0 中被删除。您可以使用 jqXHR.done()、jqXHR .fail() 和 jqXHR.always() 代替。" - jQuery

【讨论】：

哦，谢谢！那解决了它。我会尽可能接受这个答案（根据堆栈 5 分钟）。你能解释一下为什么json是错误的原因吗？谢谢！
谢谢。不要忘记查看 jQuery 的弃用通知。 :)
@deadant88 dataType 是服务器响应的数据类型。而且，它的default 值是(xml, json, script, or html)。因为，您期望 html 类型数据而不是 json 类型。通过指定，您将限制仅获取 json 类型的数据。所以，这条线被删除了。我希望你清楚我想说什么！！！