如何使用 svg 更改页面和发布数据
How can i use svg to change page and post data
我尝试使用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]
相关文章:
- 用程序搜索JQuery数据表中的文本
- 要求输入在数据列表中
- 正在将数据主题添加到所有项目
- 函数参数中的数据与指定变量之间的任何性能差异
- 在VanillaJS中模拟模型双向数据绑定
- CSS-如何定位内容数据标题
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- 无法在数据endVal中设置值=“”;{{ucount}}”;使用Angular JS的CountUp
- 序列化数据属性中对象的最可靠方法
- 如何将JSON数据导入我的ejs模板
- 不显示带有本地json文件数据的谷歌地图脚本
- 如何将json数据显示为html
- 画布数据到图像
- Highcharts系列.数据数据类型限制
- 在jQuery mobile/java脚本的TextBoxes中动态添加未加载的数据.数据具有[object HTMLI
- 严格模式下的图像数据数据分配
- 具有持久数据(数据存储)的Chrome扩展程序
- Java客户端卡在来自nodejs服务器的数据数据流中
- 高级javascript源数据-数据表
- 在 HTML (SVG) 元素中包含数据/数据密钥