我尝试使用SVG并使形状可以通过ajax重定向到下一页。当页面被重定向时，还要将数据发布到下一页。但我不知道该怎么做。这是我尝试过的代码：
.HTML：
<circle fill="red" cx="100" cy="100" onclick=NodesDown(5)>
Javascript：
function NodesDown(id) {
//
$.ajax({
url:'index_view.php',
type: 'POST',
data: {grade: id}
})
.done(function() {
location.href="index_view.php";
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
});
}
index_view.php
<?php echo $_POST[grade]; ?>
如果要在
发送 POST 数据时重定向到页面，最简单的方法是创建表单并提交。
$('<form>')
//create input for each value you want to send
.append($('<input>').attr('name', 'grade').val(id))
//define how and where to the data will be send
.attr('method', 'POST')
.attr('action', 'index_view.php')
.submit()
;
只是一个例子，没有实际测试。您可能需要添加更多属性才能正确提交它（也许您还需要表单中的提交按钮？
要将当前页面替换为通过 AJAX 加载的 HTML，您需要使用 document.write（） 方法：
$.ajax({
url: 'index_view.php',
type: 'POST',
data: {grade: id}
}).always(function(response, status) {
if ('success' !== status) {
alert('Cannot download');
return;
}
document.open('text/html','replace');
document.write(response);
document.close();
});
在某些浏览器（特别是 Chrome）中，这可能会破坏历史记录对象和后退、前进和重新加载的功能！
我用这种方式来解决我的问题。.js：
$.ajax({
url: 'php/data_nodes_PDO_test.php',
type: 'POST',
data: {indicator: newURL[1]}
})
.done(function(data) {
$('.backToPage').css('display', 'inline');
$("#root > g > g").remove();
$("#root > g > line").remove();
$("#root > g > marker").remove();
console.log("success" + data);
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
});
安慰：
[{"id":"6","map_id":null,"Nodes_text":"(5-n-11-S01)","transform":"translate(-468,-619)","class":"sNodes","r":"15","source":null,"target":null,"fixed":null,"indicator":"5-n-11-S01"},{"id":"7","map_id":null,"Nodes_text":"(5-b-01)","transform":"translate(513,615)","class":"bNodes","r":"25","source":null,"target":null,"fixed":null,"indicator":"5-b-01"},false,false,false]