Ajax调用致页面自动刷新：html2canvas截图上传后页面刷新问题求助

嘿，这个问题我碰到过好多次啦！核心原因应该是你用了传统的表单提交方式——这种提交会默认触发页面跳转/刷新。要解决这个问题，咱们只需要改成异步上传就好，也就是用AJAX类的请求来发送截图数据，这样页面就能保持不动了。

先看看你的服务器端代码片段（我补全了部分逻辑）：

public void SaveImage(string imageString, int id) {
    string s = imageString.Replace("data:image/png;base64,", "");
    byte[] imageB = Convert.FromBase64String(s);
    var filePath = Path.Combine(Server.MapPath("~/screens/" + id));
    Directory.CreateDirectory(filePath);
    using (var fs = new FileStream(Path.Combine(filePath, "screen.png"), FileMode.Create))
    {
        fs.Write(imageB, 0, imageB.Length);
    }
}

具体解决方案 #

1. 前端：用异步请求发送截图数据 #

放弃传统的表单提交，改用Fetch API或者jQuery AJAX来异步发送html2canvas生成的截图数据。

方案一：原生Fetch API

// 获取需要截图的div元素
const targetDiv = document.getElementById('your-target-div-id');

// 生成截图并异步上传
html2canvas(targetDiv).then(canvas => {
    // 将canvas转为base64格式的图片字符串
    const imageBase64 = canvas.toDataURL('image/png');
    
    // 发送POST请求到服务器
    fetch('/YourControllerName/SaveImage', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            // ASP.NET项目需要带上防伪造令牌，避免400错误
            'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
        },
        body: JSON.stringify({
            imageString: imageBase64,
            id: 123 // 替换成你的实际业务ID
        })
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            console.log('截图上传成功！');
            // 这里可以添加成功提示，比如弹窗、更新页面元素，完全不用刷新
        } else {
            console.error('上传失败:', result.message);
        }
    })
    .catch(error => {
        console.error('请求出错:', error);
    });
});

方案二：jQuery AJAX（如果你项目里用了jQuery）

const targetDiv = $('#your-target-div-id')[0];
html2canvas(targetDiv).then(canvas => {
    const imageBase64 = canvas.toDataURL('image/png');
    $.ajax({
        url: '/YourControllerName/SaveImage',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({
            imageString: imageBase64,
            id: 123
        }),
        headers: {
            'RequestVerificationToken': $('input[name="__RequestVerificationToken"]').val()
        },
        success: function(result) {
            if (result.success) {
                alert('截图上传成功！');
            } else {
                alert('上传失败：' + result.message);
            }
        },
        error: function() {
            alert('请求出错，请稍后重试');
        }
    });
});

2. 后端：优化Action返回值（可选但推荐） #

把原来返回void的方法改成返回JsonResult，这样前端能更直观地判断上传结果：

[HttpPost] // 明确标记为POST请求
public JsonResult SaveImage(string imageString, int id)
{
    try
    {
        string s = imageString.Replace("data:image/png;base64,", "");
        byte[] imageB = Convert.FromBase64String(s);
        var filePath = Path.Combine(Server.MapPath("~/screens/" + id));
        Directory.CreateDirectory(filePath);
        using (var fs = new FileStream(Path.Combine(filePath, "screen.png"), FileMode.Create))
        {
            fs.Write(imageB, 0, imageB.Length);
        }
        // 返回成功结果
        return Json(new { success = true, message = "截图保存成功" });
    }
    catch (Exception ex)
    {
        // 返回失败结果及错误信息
        return Json(new { success = false, message = ex.Message });
    }
}

关键注意事项 #

• 如果之前用了<form>标签提交，一定要阻止默认的提交行为：在提交事件里加上event.preventDefault()
• ASP.NET项目默认启用了防伪造验证，必须在请求头里带上RequestVerificationToken，否则会返回400错误
• 确保后端Action标记了[HttpPost]特性，避免请求方法不匹配的问题

这样调整后，上传截图的过程就不会触发页面刷新了，你还能根据后端返回的结果给用户友好的反馈~

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