Javascript 如何使用AJAX在另一个页面中返回HTML？

所以我创建了一个表单。在这个表单中，我向服务器发出GET请求以搜索特定用户。负责使用查询词的视图返回一个模板，如下所示

html格式

<a href="{% url 'logout'}">Logout</a>

<p>Welcome</p>
<form id="search" method="GET" action="{% url 'results' %}" placeholder= "Choose a friend" 
autocomplete="off">
{{form}}
<input type="submit" value="search" name="search">
</form>

<a href="{% url 'liked' %}"> View Liked Songs</a>
{% endblock %}

`views to handle data passed into the form`

def results(request):
if request.method == "GET":
    search_query = request.GET.get("username")
    searched_user = UserProfile.objects.filter(
            user__username__contains=search_query
        )
    return render(
    request, "searched_results.html", {
        "searched_user":searched_user
    })
else:
    return HttpResponse("Search returned nothing")

但是我希望结果端点返回带有按钮的HTML。然后，该按钮触发上面的HTML文件显示。我决定使用AJAX，为上面的html创建一个单独的

html

端点，让

结果
端点返回
toggle.html
，然后使用JS获取
html
端点并填充空div，但都没有用。我如何做到这一点

def html(request): 
return render(request, 
    template_name= "search_results.html"
)

//toggle.html

 {% extends "base.html" %}
 {% block  spotify %}

<div id="container">
</div>

 <button id=likedsongsbutton>View liked songs</button>
 <script>
var request = new XMLHttpRequest();
const container= document.getElementById("container")
request.onload = function() {
if (this.status == 200) {
    document.querySelector("#likedsongsbutton").addEventListener("click", 
    () => container.innerHTML = request.responseText
    );}
else{
    console.warn("error");
}};
request.open('GET', '{% url "html" %}', true);
request.send();
</script>
{% endblock %}

{%extends“base.html”%}
{%block spotify%}
观看喜欢的歌曲
var request=new XMLHttpRequest（）；
const container=document.getElementById（“容器”）
request.onload=函数（）{
如果（this.status==200）{
document.querySelector（“likedsongsbutton”）.addEventListener（“单击”，
（）=>container.innerHTML=request.responseText
);}
否则{
控制台。警告（“错误”）；
}};
open（'GET'，'{%url“html”%}'，true）；
request.send（）；
{%endblock%}

 {% extends "base.html" %}
 {% block  spotify %}

<div id="container">
</div>

 <button id=likedsongsbutton>View liked songs</button>
 <script>
var request = new XMLHttpRequest();
const container= document.getElementById("container")
request.onload = function() {
if (this.status == 200) {
    document.querySelector("#likedsongsbutton").addEventListener("click", 
    () => container.innerHTML = request.responseText
    );}
else{
    console.warn("error");
}};
request.open('GET', '{% url "html" %}', true);
request.send();
</script>
{% endblock %}