点击表格行通过POST请求在新标签页打开页面时空白页问题求助

需求：实现表格行可点击，通过POST请求跳转到vehicledetails页面。现有代码能在当前页面加载目标页面内容，但调整后尝试在新标签页打开时，只得到空白页面，以下是所用代码，求解决：

原有表格行代码 #

<tr class="clickable" data-href="javascript:post2('vehicledetails',{weighing_id: {{row['weighing_id']}}})"> 
</tr>

原有点击事件代码 #

var elements = document.getElementsByClassName('clickable');
for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    element.addEventListener('click', function() {
        var href = this.dataset.href;
        if (href) {
           window.open(href);
       }
   });
 }

原有post2函数代码 #

function post2(path, params, method='POST') {
    var form_data = $(this).serialize();
    console.log(form_data)
    $.ajax({
            url: path, 
            type: method,      
            data: params,     
            cache: false,           
            success: function(data){                           
                $("#result").html(data);                      
            }           
        });    
};

问题原因 #

原来的思路存在本质问题：用window.open执行javascript:post2(...)时，新标签页的上下文是空的，post2里的AJAX请求只会往原页面的#result元素填充内容，新标签页根本没有这个元素，自然显示空白。而且javascript:协议在新标签页执行的方式本身就不符合POST跳转的需求。

解决方法 #

改用动态创建表单并提交的方式，这是实现POST请求在新标签页跳转的标准做法：

修改后的表格行

把data属性改成存储路径和参数，避免直接存JS代码：

<tr class="clickable" data-path="vehicledetails" data-weighing-id="{{row['weighing_id']}}">
    <!-- 这里放表格单元格内容 -->
</tr>

修改后的点击事件处理代码

// 用querySelectorAll更简洁，替代getElementsByClassName
document.querySelectorAll('.clickable').forEach(row => {
    row.addEventListener('click', function() {
        const targetPath = this.dataset.path;
        const weighingId = this.dataset.weighingId;

        // 1. 创建隐藏的POST表单
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = targetPath;
        form.target = '_blank'; // 指定在新标签页打开
        form.style.display = 'none'; // 隐藏表单

        // 2. 添加POST参数
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'weighing_id';
        input.value = weighingId;
        form.appendChild(input);

        // 3. 提交表单
        document.body.appendChild(form);
        form.submit();
        // 提交后移除表单，清理DOM
        document.body.removeChild(form);
    });
});

移除原有post2函数

现在不需要原来的post2函数了，直接删除即可。

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