Question

我试图显示图表，选择一个元素，然后使用所选元素中的数据对新页面进行发布请求。

页面显示正常，我可以选择元素。但是当我执行POST时，出现此错误：

错误：发送标头后无法设置

我不确定如何正确执行操作。

我尝试重新格式化POST请求，而没有更改。

代码

<!DOCTYPE html>
<html lang="en">

    <head>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    </head>

    <body>
        <p> </p>
        <p> </p>
        <div id="table_div"></div>
        <script>
            // 
            //  https://developers.google.com/chart/interactive/docs/gallery/table
            //
            google.charts.load('current', {
                'packages': ['table']
            });
            google.charts.setOnLoadCallback(drawTable);

            var data1 = <%-JSON.stringify(data1)%>

            function drawTable() {
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Filename');
                data.addColumn('string', 'Doclink');
                data.addColumn('number', 'Size');
                data.addColumn('string', 'Date');
                data.addColumn('string', 'Meta1');
                data.addColumn('string', 'User');
                data.addRows(data1);

                var table = new google.visualization.Table(document.getElementById('table_div'));

                table.draw(data, {
                    showRowNumber: true,
                    width: '70%',
                    height: '100%'
                });

                var cssClassNames = {
                    'headerRow': 'italic-darkblue-font large-font bold-font',
                    'tableRow': '',
                    'oddTableRow': 'beige-background',
                    'selectedTableRow': 'orange-background large-font',
                    'hoverTableRow': '',
                    'headerCell': 'gold-border',
                    'tableCell': '',
                    'rowNumberCell': 'underline-blue-font'
                };

                var options = {
                    'showRowNumber': true,
                    'allowHtml': true,
                    'cssClassNames': cssClassNames
                };

                // table is my global orgchart chart variable.
                google.visualization.events.addListener(table, 'select', selectHandler);

                // Create our table.
                var table = new google.visualization.Table(document.getElementById('table_div'));
                table.draw(data, options);

                // Add our selection handler.
                google.visualization.events.addListener(table, 'select', selectHandler);

                function selectHandler() {
                    var selection = table.getSelection();
                    var item = selection[0].row;
                    console.log('selection ', item);
                    var str = data.getFormattedValue(item, 0) + '   ' + data.getFormattedValue(item, 1);
                    // console.log (str);
                    alert('You selected ' + str);

                    let post_data = {
                        docId: data.getFormattedValue(item, 1)
                    };
                    console.log('post_data ', post_data);

                    fetch("/showdocument", {
                        method: "POST",
                        body: JSON.stringify(post_data)
                    }).then(res => {
                        console.log("Request complete! response:", res);
                    });
                }
            }
        </script>
    </body>

</html>

行和数据选择正在工作。没有错误，我无法将信息发布到新页面。

我该如何解决？

Answer 1

如果我错了，请纠正我，但您希望使用从表中收集的信息重定向到showdocument页。

请记住： Request.redirect could be "follow", "error" or "manual".

您的提取方法应如下：

fetch("/showdocument", {
     method: "POST",
     redirect: "follow",
     body: JSON.stringify(post_data)
   }).then(res => {
     console.log("Request complete! response:", res
    );

   });

这里有更多文档：

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Javasciprt发布错误：发送标头后无法设置标头

1 个答案: