重定向到上一個html頁面時，頁面不應刷新
[英]on redirecting to a previous html page the page should not refresh
問題描述
實際上，我在“ click.html”中有兩個字段。一個是“名稱”字段，另一個是“ client_ip”字段。我已經在“名稱”字段中輸入了我的姓名，之后單擊“ client_ip”文本框已重定向到index.html。
在index.html中，我將選擇一些必需的client_ip，然后將頁面再次重定向到click.html。這樣，選定的client_ip字段將放置在click.html頁面的client_ip文本框中。
現在，重定向到click.html之后，由於重定向時頁面刷新，我在“名稱”文本框中輸入的名稱消失了。但是現在，我想重定向到click.html，而無需刷新click.html頁面。我可以實現這個目標嗎？
我的click.html：
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/mpryvkin/Plugins/master/pagination/simple_numbers_no_ellipses.js"></script>
<link rel='stylesheet' href='style.css'>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
</head>
<body>
<div>
<label>Start Time:<select id="Start Time" id="startID" name="StartTime">
<option value="00:00" >00:00</option>
<option value="00:30">00:30</option>
<option value="01:00">01:00</option>
<option value="01:30">01:30</option>
<option value="02:00">02:00</option>
<option value="02:30">02:30</option>
<option vlaue="03:00">03:00</option>
</select></label>
</div>
<div id="clicDiv">
Client IP :<input type="text" id="ipClick" onclick="getValue();" name="Client IP" style="width:600px;"/>
</div>
<script>
function getUSERIP(){
if(!window.location.href.match(/client_ip=.*?([^\&]+)/))
return;
var ip = window.location.href.match(/client_ip=.*?([^\&]+)/)[0].replace('client_ip=','');
var res = ip.replace(/%2C/g,",")
$("#ipClick").val(res);
}
getUSERIP();
function getUSERName(){
if(!window.location.href.match(/name=.*?([^\&]+)/))
return;
var name = window.location.href.match(/name=.*?([^\&]+)/)[0].replace('name=','');
if($("#hiddenName").length)
$("#hiddenName").val(name);
else $('#textDiv').val(name);
}
getUSERName();
function getStartTime(){
if(!window.location.href.match(/StartTime=.*?([^\&]+)/))
return;
var StartTime = window.location.href.match(/StartTime=.*?([^\&]+)/)[0].replace('StartTime=','');
var res = StartTime.replace(/%253A/g,",")
if($("#hiddenName5").length)
$("#hiddenName5").val(res);
else $('#startID').val(res);
}
getStartTime();
function getValue(){
var name = $("#textDiv").val()?('?name='+$("#textDiv").val()):'';
location.href='/home/divya/html_docs/index.html'+name;
}
</script>
</body>
</html>
我的index.html：
<!DOCTYPE html>
<meta charset='utf-8'>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/mpryvkin/Plugins/master/pagination/simple_numbers_no_ellipses.js"></script>
<link rel='stylesheet' href='style.css'>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<script>
$(document).ready(function() {
$("#ip").val('');
$('#example').DataTable( {
"pagingType": "full_numbers"
} );
} );
</script>
</head>
<body>
<div>
<form action="/home/divya/html_docs/click.html" method="get" >
Client_ip :<input type="text" id ="ip" name="client_ip" style="width: 600px;"/>
<div id="subDiv">
<button type="submit" value="Submit">Submit</button>
</div>
</div></br>
<table id="example" class="display" cellspacing="0" width="100%">
</table>
<script>
var selectedIps = [];
var tabulate = function (data,columns) {
var svg = d3.select('#ip').append("svg")
var table = d3.select('#example')
var thead = table.append('thead')
var tbody = table.append('tbody')
thead.append('tr')
.selectAll('th')
.data(columns)
.enter()
.append('th')
.text(function (d) { return d })
var rows = tbody.selectAll('tr')
.data(data)
.enter()
.append('tr')
var cells = rows.selectAll('td')
.data(function(row) {
return columns.map(function (column) {
return { column: column, value: row[column] }
})
})
.enter()
.append('td')
.text(function (d) { return d.value })
.append("input")
.attr("id","change")
.attr("type", "checkbox")
.style("float","left")
.on("change", function(d, i) {
if ($(this)[0].checked) {
if (selectedIps.indexOf(d.value) < 0) {
selectedIps.push(d.value);
}
} else {
if (selectedIps.indexOf(d.value) > -1) {
selectedIps.splice(selectedIps.indexOf(d.value), 1);
}
}
$('#ip').val(selectedIps.join(','));
});
return table;
}
d3.csv('some1.csv',function (data) {
var columns = ['client_ip']
tabulate(data,columns)
});
</script>
</body>
</html>
誰能幫我...
1 個解決方案
解決方案1
1 已采納 2015-09-30 05:42:51
click.html上的更新功能
function getValue(){
var name = $("#textDiv").val()?('?name='+$("#textDiv").val()):'';
location.href='/home/divya/html_docs/index.html'+name;
}
在index.html上
隱藏在表單元素中
<input type="hidden" id="hiddenName" name="name" />
將此函數放在通用js文件上，或者放在index.html和click.html中
function getUSERName(){
if(!window.location.href.match(/name=.*?([^\&]+)/))
return;
var name = window.location.href.match(/name=.*?([^\&]+)/)[0].replace('name=','');
if($("#hiddenName").length)
$("#hiddenName").val(name);
else $('#textDiv').val(name);
}
getUSERName();
重定向到上一頁
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.