如何创建HTML按钮，实现切换展示来自Django models.py的文本内容

你当前的实现里，服务端已经把所有句子传到了模板，但前端JS没有拿到这些句子数据，所以没法实现切换逻辑，按以下步骤修改即可：

方案1：前端预加载所有句子（适合句子数量少的场景，无需额外请求） #

直接修改你index.html中的JS代码即可，完整代码如下：

<script type="text/javascript">
// 从Django模板变量中提取所有句子生成JS数组
const fraseList = [
    {% for item in frases %}
        "{{ item.frase|escapejs }}",
    {% endfor %}
]
// 初始化当前展示的句子索引，默认0对应首次加载的第一条句子
let currentIdx = 0

function nova_frase() {
    // 索引自增，超出数组长度后回到开头
    currentIdx = (currentIdx + 1) % fraseList.length
    document.getElementById('frase').innerText = fraseList[currentIdx]
}
</script>

如果需要点击后随机切换不按顺序，可以把函数内的索引逻辑改成随机取值：

function nova_frase() {
    let newIdx
    // 避免取到和当前一样的句子
    do {
        newIdx = Math.floor(Math.random() * fraseList.length)
    } while(newIdx === currentIdx && fraseList.length > 1)
    currentIdx = newIdx
    document.getElementById('frase').innerText = fraseList[currentIdx]
}

方案2：AJAX异步请求（适合句子数量大的场景，减少首次页面加载压力） #

步骤1：新增返回随机句子的视图 #

修改你的views.py，新增接口视图：

from django.http import JsonResponse

# 原有IndexView代码保持不变，新增以下代码
def get_random_frase(request):
    random_frase = Frase.objects.filter(ativo=True).order_by('?').first()
    return JsonResponse({
        'frase': random_frase.frase,
        'dica': random_frase.dica
    })

步骤2：配置接口路由 #

在你的APP的urls.py中新增路由条目：

from django.urls import path
from .views import IndexView, get_random_frase

urlpatterns = [
    path('', IndexView.as_view(), name='index'),
    path('api/random-frases/', get_random_frase, name='random_frase_api'),
]

步骤3：修改前端JS逻辑 #

修改index.html中的nova_frase函数：

<script type="text/javascript">
function nova_frase() {
    fetch("{% url 'random_frase_api' %}")
        .then(res => res.json())
        .then(data => {
            document.getElementById('frase').innerText = data.frase
            // 如果需要展示提示可以同步更新：document.getElementById('dica').innerText = data.dica
        })
}
</script>

常见问题排查 #

如果之前测试点击按钮没反应，可以先打开浏览器开发者工具（F12）的控制台标签，排查以下问题：

• JS代码是否在id="frase"的元素加载完成后才执行，建议把script标签放在</body>标签之前
• 元素id是否拼写错误，不存在对应元素会触发JS报错导致逻辑不执行

内容的提问来源于stack exchange，提问作者Marcílio Júnior