点击Save、Edit按钮时阻止页面刷新的实现方案及代码示例

问题根源 #

• 页面里的<button type="submit">点击会触发表单默认提交，直接导致页面刷新
• JS动态生成的<a>标签，点击后会跳转页面，同样引发刷新

解决步骤 #

1. 处理Submit类型的Edit按钮 #

要么把按钮的type="submit"改成type="button"（从根源避免默认提交），要么保留submit类型，但在点击事件里阻止默认行为，再执行自定义编辑逻辑。

2. 处理JS生成的A标签编辑按钮 #

直接去掉href的跳转地址，或者在点击时阻止a标签的默认跳转动作，改用AJAX请求数据，动态更新页面内容，实现无刷新编辑。

完整无刷新代码示例 #

HTML部分（Index页面） #

<div class="row">
    <div class="col-4">
        <!-- 把submit改成button，避免默认提交刷新页面 -->
        <button type="button" class="btn btn-success form-control edit-btn">Edit</button>
    </div>
    <div class="col-4">
        <button type="button" class="btn btn-danger form-control" onclick="backToEmployee()">Back</button>
    </div>
</div>

<!-- 用户信息展示容器 -->
<div class="user-info-container mt-3">
    <p>姓名：<span id="name">张三</span></p>
    <p>邮箱：<span id="email">zhangsan@example.com</span></p>
    <p>手机号：<span id="phone">13800138000</span></p>
</div>

<!-- 保存按钮 -->
<div class="row mt-3">
    <div class="col-4">
        <button type="button" class="btn btn-primary form-control save-btn">Save</button>
    </div>
</div>

JavaScript部分 #

// 绑定Edit按钮点击事件
document.querySelector('.edit-btn').addEventListener('click', function() {
    // 模拟请求后端获取员工数据，实际替换成你的接口地址
    const employeeId = 1; // 假设当前操作的员工ID
    fetch(`/Employee/GetEmployee/${employeeId}`)
        .then(res => res.json())
        .then(data => {
            // 把展示状态改成编辑状态，用input替换span
            document.getElementById('name').innerHTML = `<input type="text" id="edit-name" value="${data.name}">`;
            document.getElementById('email').innerHTML = `<input type="email" id="edit-email" value="${data.email}">`;
            document.getElementById('phone').innerHTML = `<input type="tel" id="edit-phone" value="${data.phone}">`;
        })
        .catch(err => console.log('获取数据失败:', err));
});

// 绑定Save按钮点击事件
document.querySelector('.save-btn').addEventListener('click', function() {
    // 收集编辑后的表单数据
    const updatedData = {
        name: document.getElementById('edit-name').value,
        email: document.getElementById('edit-email').value,
        phone: document.getElementById('edit-phone').value,
        id: 1 // 员工ID
    };

    // 用POST请求提交数据，无刷新保存
    fetch('/Employee/SaveEmployee', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(updatedData)
    })
    .then(res => res.json())
    .then(result => {
        if (result.success) {
            // 保存成功后，把编辑状态改回展示状态
            document.getElementById('name').textContent = updatedData.name;
            document.getElementById('email').textContent = updatedData.email;
            document.getElementById('phone').textContent = updatedData.phone;
            alert('保存成功');
        } else {
            alert('保存失败，请重试');
        }
    })
    .catch(err => console.log('保存数据失败:', err));
});

// 处理动态生成的编辑按钮（用事件委托，确保新生成的元素能触发事件）
document.addEventListener('click', function(e) {
    const editLink = e.target.closest('.btn-info.edit-link');
    if (editLink) {
        e.preventDefault(); // 阻止a标签默认跳转
        const employeeId = editLink.dataset.id; // 从data-id获取员工ID
        // 执行和上面Edit按钮一样的编辑逻辑
        fetch(`/Employee/GetEmployee/${employeeId}`)
            .then(res => res.json())
            .then(data => {
                document.getElementById('name').innerHTML = `<input type="text" id="edit-name" value="${data.name}">`;
                document.getElementById('email').innerHTML = `<input type="email" id="edit-email" value="${data.email}">`;
                document.getElementById('phone').innerHTML = `<input type="tel" id="edit-phone" value="${data.phone}">`;
            })
            .catch(err => console.log('获取数据失败:', err));
    }
});

// 修改后的动态生成编辑按钮代码
function generateEditButton(data) {
    return `<div class="text-center"> 
        <a href="#" class="btn btn-info edit-link" data-id="${data}"> 
            <i class="fas fa-edit"></i> 编辑
        </a>
    </div>`;
}

// 原返回函数保持不变
function backToEmployee() {
    window.history.back();
}

注意事项 #

• 所有会触发刷新/跳转的元素，必须用preventDefault()阻止默认行为
• 数据交互全用AJAX（这里用了fetch API，也可以用axios），不刷新整个页面
• 动态生成的元素一定要用事件委托绑定事件，不然新生成的元素不会响应点击

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