Question

我尝试使用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]; ?>

Answer 1

如果要在发送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()
;

只是一个例子，没有经过实际测试。您可能需要添加更多属性才能正确提交它（也许您还需要在表单中提交按钮？）。

Answer 2

要使用通过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）中，这可能会破坏历史对象和Back，Forward和Reload的功能！

Answer 3

我用这种方式来解决我的问题。 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]

如何使用svg更改页面和发布数据

3 个答案: