Javasciprt Post Error: Can't set headers after they are sent
Question
I am trying to display a chart, select an element and do a post request to a new page with the data from the selected element.
The page displays fine and I can select the element. But when I do the POST I get this error:
Error: Can't set headers after they are sent
And I am not sure how to do it properly.
I tried to reformat the POST request with no change.
Code
<!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>
The row and data selection are working. I just can't do the POST to a new page without the error.
How can I resolve this?
1 answers
solution1
0 2019-07-19 02:52:32
Correct me if I am wrong but you want to be redirected to the showdocument page with the information gathered from the table.
Remember that: Request.redirect could be "follow", "error" or "manual".
Your fetch method should be like this:
fetch("/showdocument", {
method: "POST",
redirect: "follow",
body: JSON.stringify(post_data)
}).then(res => {
console.log("Request complete! response:", res
);
});
Here is more documentation:
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.