Question

我已经阅读了很多关于pushState和PopState的内容，但我真的不知道如何在我的代码中实现它。

的index.php：

<section id="tablazonas" class="container features"></section>
<script>
function getZona()
{
   $.ajax({
     type: "GET",
     url: 'zonas.php',
     success: function(data) {
          $('#tablazonas').html(data);

     }
   });
}
window.onload=getZona; 

function getPref(id_zona,name_zona)
{
   $.ajax({
     type: "GET",
     url: 'pref.php',
     data: { 'id_zona': id_zona , 'name_zona': name_zona},
     success: function(data) {
          $('#tablazonas').html(data);
        $('html,body').animate({
              scrollTop: $('#tablazonas').offset().top - ( $(window).height() - $('#tablazonas').outerHeight(true) ) / 2
          }, 1000);
     }
   });
}
</script>

zonas.php

<h2>Zonas</h2>
<div class="row">
    <table id="zonas" class="table table-bordered hover stripe cell-border compact mini-tablas" style="width:100%">
      <thead>    
          <tr> 
              <th>ZONAS</th>
              <th>TITLE 1</th>
              <th>TITLE 2</th>
              <th>TITLE 3</th>
              <th>TITLE 4</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <th><a href="javascript:void(0);" onclick="getPref(1,'ZONA 1')">ZONA 1</a></th>
              <th>23.87</th>
              <th>27.69</th>
              <th>-3.82</th>
              <th>0.86</th>
         </tr>
         <tr>
             <th><a href="javascript:void(0);" onclick="getPref(2,'ZONA 2')">ZONA 2</a></th>
             <th>38.39</th>
             <th>45.30</th>
             <th>-6.91</th>
             <th>0.85</th>
         </tr>
  </table>

pref.php（在这里，我必须做一个后退按钮才能返回上一次再次进行ajax调用的状态）

<?php
require("claseutilidades.php");
$u = new Utilidades();

$id_zona = $_GET['id_zona'];
$name_zona = $_GET['name_zona'];
?>
<h2>Prefecturas de <?php echo $name_zona; ?></h2>
  <div class="row">
    <table id="prefecturas" class="table table-bordered hover stripe cell-border compact mini-tablas" style="width:100%">
        <thead>    
            <tr> 
                <th>Pref</th>
                <th>TITLE 1</th>
                <th>TITLE 2</th>
                <th>TITLE 3</th>
                <th>TITLE 4</th>
            </tr>
        </thead>
        <tbody>
    <?php $u->getPref($id_zona,$name_zona); ?>
        </tbody>
       <tfoot>
            <tr>
               <th>TOTAL</th>
               <th>0</th>
               <th>0</th>
               <th>0</th>
               <th>0</th>
           </tr>
      </tfoot>
    </table> 
  </div>
  <hr>
  <div class="row">
    <div class="col-md-2 col-md-offset-5"><button type="button" class="btn btn-block btn-outline btn-primary" href="javascript:void(0);" onclick="getZona()">Back</button></div>

  </div>

<script>

function getZona()
{
   $.ajax({
     type: "GET",
     url: 'zonas.php',
     success: function(data) {
          $('#tablazonas').html(data);
            $('html,body').animate({
              scrollTop: $('#tablazonas').offset().top - ( $(window).height() - $('#tablazonas').outerHeight(true) ) / 2
          }, 1000);
     }
   });

}

我尝试过更改

<th><a href="javascript:void(0);" onclick="getPref(1,'ZONA 1')">ZONA 1</a></th>

的

<th><a href="#zona1" onclick="getPref(1,'ZONA 1')">ZONA 1</a></th>

但这并没有解决我的问题，因为它让后退按钮工作但它没有保存页面的状态

在ajax调用后使用后退按钮和历史记录

0 个答案: