javascript - Javasciprt Post 错误：发送后无法设置标头

问题描述

我正在尝试显示图表，选择一个元素并使用来自所选元素的数据向新页面发出发布请求。

页面显示正常，我可以选择元素。但是当我做 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>

行和数据选择正在工作。我只是不能在没有错误的情况下对新页面进行 POST。

我该如何解决这个问题？

标签： javascriptpostgoogle-visualizationrequest-headers

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

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

你的 fetch 方法应该是这样的：

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

   });

javascript - Javasciprt Post 错误：发送后无法设置标头

问题描述

解决方案

推荐阅读