如何在点击时调用Django视图并实现重定向？

以下是针对你两个疑问的具体解决方案：

1. 前端点击事件调用视图并完成重定向 #

首先修正模板中的参数传递和JS函数逻辑：

修改search.html代码 #

{% block title %}
Search
{% endblock %}

{% block content %}
<!-- 如果用POST方案，需要添加CSRF令牌 -->
{% csrf_token %}

<script>
  // 方案一：使用GET请求直接跳转（简单直观）
  function redirectToHome(songName, songArtist) {
    // 构造带参数的URL，对特殊字符编码避免错误
    const url = "{% url 'search_results' %}?song=" + encodeURIComponent(songName) + "&artist=" + encodeURIComponent(songArtist);
    window.location.href = url;
  }

  /* 方案二：使用POST请求提交（适合需要隐藏参数的场景）
  function redirectToHome(songName, songArtist) {
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = "{% url 'search_results' %}";

    // 添加CSRF令牌（Django POST请求必须）
    const csrfToken = document.querySelector('input[name="csrfmiddlewaretoken"]').value;
    const csrfInput = document.createElement('input');
    csrfInput.type = 'hidden';
    csrfInput.name = 'csrfmiddlewaretoken';
    csrfInput.value = csrfToken;
    form.appendChild(csrfInput);

    // 添加歌曲参数
    const songInput = document.createElement('input');
    songInput.type = 'hidden';
    songInput.name = 'song';
    songInput.value = songName;
    form.appendChild(songInput);

    const artistInput = document.createElement('input');
    artistInput.type = 'hidden';
    artistInput.name = 'artist';
    artistInput.value = songArtist;
    form.appendChild(artistInput);

    document.body.appendChild(form);
    form.submit();
  }
  */
</script>

<form method="GET" action="{% url 'search' %}">
    <input type="text" name="q" id="search-input">
    <button type="submit">Search</button>
</form>
  
{% if search %}
  {% for result in search %}
    <!-- 用escapejs过滤特殊字符，避免JS语法错误 -->
    <p onclick="redirectToHome('{{ result.name|escapejs }}', '{{ result.artists.0.name|escapejs }}')">
      {{result.name}} by {{ result.artists.0.name }} 
      <img src="{{ result.album.images.0.url }}" alt="{{result.name}} image" style="width: 200px; height: 200px;"> 
    </p> 
  {% endfor %}
{% endif %}
{% endblock %}

2. 在search_results视图中获取传递的参数 #

根据你选择的请求方式（GET/POST），对应修改视图逻辑：

修改views.py代码 #

方案一（对应GET请求）

def search(request):
    query = request.GET.get('q', '')
    if query:
        sp = SpotipyConnection(client_id=sp_client_id, client_secret=sp_client_secret)
        context = {'search': sp.songSearch(query)}
        return render(request,'main/search.html',context=context)
    return render(request,'main/search.html',{})

def search_results(request):
    # 从GET参数中获取歌曲和歌手信息，设置默认值避免报错
    songName = request.GET.get('song', '')
    songArtist = request.GET.get('artist', '')
    # 仅当参数有效时调用openAISearch
    if songName and songArtist:
        context = openAISearch(artist=songArtist,song=songName)
    else:
        context = {}
    return render(request,'main/search_results.html',context=context)

方案二（对应POST请求）

def search(request):
    query = request.GET.get('q', '')
    if query:
        sp = SpotipyConnection(client_id=sp_client_id, client_secret=sp_client_secret)
        context = {'search': sp.songSearch(query)}
        return render(request,'main/search.html',context=context)
    return render(request,'main/search.html',{})

def search_results(request):
    if request.method == 'POST':
        songName = request.POST.get('song', '')
        songArtist = request.POST.get('artist', '')
        if songName and songArtist:
            context = openAISearch(artist=songArtist,song=songName)
        else:
            context = {}
        return render(request,'main/search_results.html',context=context)
    # 非POST请求直接重定向到搜索页
    return redirect('search')

额外注意事项 #

• 确保在urls.py中已为search_results视图配置正确的URL名称：

  path('search/results/', views.search_results, name='search_results'),
  

• escapejs过滤器用于处理歌曲/歌手名中的特殊字符（如引号、换行），避免JS语法错误；encodeURIComponent用于处理URL中的特殊字符，保证参数传递准确。

内容的提问来源于stack exchange，提问作者aids