Question

我有一个包含两列使用ajax的表。

在第一列中，我在 job.call.php 的帮助下列出作业，当在第一列中单击作业时，作业的详细信息将在第二列中加载 job.details.php 的帮助。

这是执行ajax加载过程的jquery代码：

$(document).ready(function () {
    if(window.location.hash) {
       var id = window.location.hash.replace('#id-', '');
       $('#details').load('job.details.php?id=' + id);

       //-----job.unclick.hide.row.select
      var div = document.getElementById("job.unclicked");
      div.style.display = "none";
    }
    });

这是表格：

        <td colspan="3" style="padding:0; width:20%; height:20%;">
            <?php include "job.header.php";?>
        </td>

    </tr>

    <tr>
        <td style="width:400px; padding:0; background-color:rgba(255, 255, 255, 0.9); vertical-align: initial;">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" style="min-height:100%; height:100px; margin:0; padding:0;" valign="top">

              <tr>
                <td style="width:400px; padding:0; vertical-align: initial; height: 35px;">
                    <div style="position: fixed;z-index: 1;">
                    <table  border='0' cellpadding='0' cellspacing='0' style='width:400px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);'>
                        <thead>
                                <tr>
                                <th position='fixed' overflow='hidden' width='19%'>Job Title</th> 
                                <th position='fixed' width='7%'>Location</th>
                                <th width='5%'>Expires</th>
                                </tr>
                        </thead>
                    </table>
                    </div>
                </td>
              </tr>

              <tr>
                <td style="width:400px; padding:0; vertical-align: initial; height:100%; bottom: 0; top:0; ">
                <?php require "module/job.call.php";?>
                </td>
              </tr>

            </table>

        </td>

        <td width="100%" style="min-width:600px; padding:0; background-color:rgba(255, 255, 255, 0.9); height:100%; bottom: 0; top:0; border: 1px; border-style: groove;"  valign="top">
            <div class="content mCustomScrollbar">
            <div id="job.unclicked" style="width:100%; border-left-width: thin; border-right-width: 0; border-top-width: thin; border-bottom-width: 0; height: 100%; bottom: 0; top:0; overflow:auto;"><?php include '../module/job.unclicked.php' ?></div>
            <div id="details" style="width:100%; border-left-width: thin; border-right-width: 0; border-top-width: thin; border-bottom-width: 0; height: 100%; bottom: 0; top:0; overflow:auto;">
            </div>
            </div>
        </td>

        <td width="150px" style="padding:0; background-color:rgba(255, 255, 255, 0.9); vertical-align:top;">
        </td>
    </tr>

</table>

Job.call.php文件

$result = mysqli_query($conn,"SELECT * FROM job  where approved='1' ORDER BY `CreatedTime` DESC");

echo "<table id='maintable' class='table-fill' border='0' cellpadding='0' cellspacing='0' style='width:400px;'>";

while($row = mysqli_fetch_array($result) ) {
    if (strlen($row['positiontitle']) > 23) $row['positiontitle'] = substr($row['positiontitle'], 0, 22) . "...";
        if (strlen($row['companyname']) > 23) $row['companyname'] = substr($row['companyname'], 0, 35) . "...";
        if (strlen($row['location']) > 23) $row['location'] = substr($row['location'], 0, 13) . "...";
        if (strlen($row['jobcategory']) > 19) $row['jobcategory'] = substr($row['jobcategory'], 0, 18) . "...";

echo "<tr onclick=\"get_data(123)\" ref=\"job.details.php?id=".$row['id']."\" target=\"content\" class=\"positiontitle-link\" data-id=\"" . $row['id'] . "\">";
  echo "<td position='fixed' overflow='hidden' width='11%'><font style='text-shadow: none;'>" . $row['positiontitle']  ."</font> <br> <font style='font-size:10px;'>". $row['companyname']."</font></a></td>";
  echo "<td position='fixed' width='7%'>" . $row['location'] . " <br> <font style='font-size:10px;'>". $row['jobcategory']."</font></td>";
  echo "<td style='padding:0;' width='5%'>" . $row['closingdate'] . "</td>";
  echo "</tr>"; 
    }

echo "</table>"

我的问题：

当我点击第一列中的作业时，作业正确加载，但是当我点击浏览器的后退按钮转到上一页时，网址会更改，但页面未加载。

我认为此代码存在问题：

$(document).ready(function () {
    if(window.location.hash) {
       var id = window.location.hash.replace('#id-', '');
       $('#details').load('job.details.php?id=' + id);

       //-----job.unclick.hide.row.select
      var div = document.getElementById("job.unclicked");
      div.style.display = "none";
    }
    });

Answer 1

当您使用Ajax时，浏览器不会保存加载页面的历史记录。因此，您需要在浏览器缓存中显式添加页面历史记录。一些插件可能会帮助您http://www.sitepoint.com/history-back-button-plugins/

Answer 2

浏览器历史记录在AJAX调用期间无法更新。

以下是可能的解决方案，

HTML5引入了history.pushState（）＆amp; history.popState（） - Check here...
可以使用Jquery插件 - Check here...
在Javascript中手动保存每个页面/ ajax调用的状态，并在页面上使用相同的内容加载，需要更多努力才能完成

当在ajax中按下浏览器的后退按钮时，不会加载上一页

2 个答案: