Question

实际上我在“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 page.How如何实现这一目标......

我的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>

任何人都可以帮助我......

Answer 1

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();

在重定向到以前的html页面时，页面不应该刷新

1 个答案: