Django中如何实现点击表单提交按钮用JS修改HTML且页面不刷新

核心问题是submit按钮的默认行为会触发表单提交、重载页面，你的JS追加逻辑执行后页面立刻刷新，所以看不到效果。按以下步骤修改即可：

关键修改点 #

• 给点击事件的回调函数添加事件对象参数，调用e.preventDefault()阻止表单默认提交行为，直接避免页面重载
• 如果你需要将表单内容提交给后端/send接口，改用异步请求（fetch/axios）发送数据，无需刷新页面即可拿到返回结果
• Django的POST请求需要携带csrf令牌，在form标签内添加{% csrf_token %}模板标签，否则会返回403错误
• 修正原代码form标签中action属性的反斜杠为正斜杠，符合URL路径规范

完整修改后代码 #

HTML部分 #

<p class="chatGoesHere" id="chatGoesHere"> 1st Item! </p> 

<form action="/send/" method="post" id="chatForm">
    {% csrf_token %}
    <input type="text" name="userMessage" id="userMessage" />
    <input type="submit" value="Send to smallest_steps bot" class="sendButt" id="sendButt" />
</form>

JavaScript部分 #

const sendBtn = document.getElementById("sendButt");
sendBtn.addEventListener("click", updateChat);

function createMenuItem(name) {
    let p = document.createElement('p');
    p.textContent = name;
    return p;
}
const chatContainer = document.getElementById('chatGoesHere');
chatContainer.appendChild(createMenuItem("TEST2"));

async function updateChat(e){
    // 核心：阻止默认表单提交，避免页面重载
    e.preventDefault();
    const userInput = document.getElementById('userMessage').value.trim();
    if (!userInput) return; // 空内容不提交
    
    // 追加用户发送的消息
    chatContainer.appendChild(createMenuItem(`你：${userInput}`));
    
    // 若不需要提交到后端，仅本地测试追加内容，可删除下方异步请求逻辑，直接清空输入框即可
    const form = document.getElementById('chatForm');
    const formData = new FormData(form);
    try {
        const response = await fetch('/send/', {
            method: 'POST',
            body: formData
        });
        const botReply = await response.text();
        // 追加机器人回复
        chatContainer.appendChild(createMenuItem(`机器人：${botReply}`));
        // 清空输入框
        document.getElementById('userMessage').value = '';
    } catch (err) {
        chatContainer.appendChild(createMenuItem('消息发送失败，请稍后重试'));
    }
}

如果你不需要和后端交互，仅测试前端追加效果，只需要保留e.preventDefault()，删掉异步请求的代码段即可实现点击按钮追加内容且不刷新页面的效果。

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