Javascript 如何在页面之间保存ajax查询的结果

背景信息

我有一个包含搜索页面的web应用程序。此搜索提供了3个不同的下拉框，这些下拉框通过ajax填充。 第一次加载页面时，框1将填充默认位置的列表。 当用户选择一个位置时，第二个下拉列表出现在同一页面上，并通过ajax填充选定位置内的建筑物。 选择建筑后，将显示带有房间列表的最终下拉框。 一旦用户选择了一个房间，该页面将显示有关该房间的详细信息，用户可以向下钻取其中一个房间属性，这将把他们带到一个新页面

问题描述

当用户完成查看房间详细信息网页并点击“后退”按钮时，我希望能够向他们显示上次离开的位置。。。这是一个搜索页面，其中包含他们以前的所有选择，这些选择将他们引导到房间详细信息。目前，当他们点击后退按钮时，默认的搜索页面将加载，他们以前的选择将消失

保存其搜索请求的详细信息的最佳方法是什么？ 我正在考虑给URL添加值。。。类似于查询字符串。现在，URL当然不会改变，因为搜索页面的一切都是通过ajax/javascript完成的。 但是除了这个选择，我想知道是否有其他的想法/方法来完成同样的事情

该解决方案必须在所有浏览器上运行，包括IE、Chrome、FFox和Safari

代码

在下拉列表中更改值时触发的ajax代码：

 $('#Locations').live('change',function(){
    $.ajax({
        url:"<?php echo site_url('mycontroller/getbuildings/');?>" + "/" + $selectedvalue,
        type:'GET',
        dataType:'json',
        success: function(returnDataFromController) {

             logic to populate building drop down
        }


 $('#buiding_Locations').live('change',function(){
     $('#room_locations').html('');
     $('#search').hide();
      var htmlstring;
      $selectedvaluebranch_ = $('#Locations').val();
      $selectedvaluebuiding_ = $('#buiding_Locations').val();

      $.ajax({
                url:"<?php echo site_url('mycontroller/getrooms');?>" + "/" + $selectedvaluebuiding_,
                type:'GET',
                dataType:'json',
                success: function(returnDataFromController) {
                    logic to populate room list
                }

$（“#位置”）.live（'change'，function（）{
$.ajax({
url:“+”/“+$selectedvalue”，
类型：'GET'，
数据类型：'json'，
成功：函数（从控制器返回数据）{
填充建筑下拉列表的逻辑
}
$（“#建筑位置”）.live（'change'，function（）{
$（“#房间位置”）.html（“”）；
$（“#搜索”）.hide（）；
var-htmlstring；
$selectedvaluebranch\=$（“#位置”）.val（）；
$selectedValueBuilding_u=$（“#Building_u位置”）.val（）；
$.ajax({
url:“+”/“+$SelectedValueBuilding”，
类型：'GET'，
数据类型：'json'，
成功：函数（从控制器返回数据）{
填充房间列表的逻辑
}

在填写位置下拉列表的方法中，（mycontroller/getLocations）我添加了使用/检查会话变量的逻辑…现在当我单击后退按钮时，位置选择被保存。“mycontroller/getLocations”方法是加载搜索页面时调用的默认方法

但是我想知道填充其他两个下拉框的最佳方法。正如您所看到的，只有当用户更改“父”下拉框的值时，才会填充它们

也许我需要在我的控制器中创建另一个方法，对所有3个框进行查询…并将所有数据发送到前端，而不是像我现在这样做…对3个单独的方法进行3个单独的调用。 然后我需要将填充各个下拉框的逻辑从现在的位置移到一个可重用的函数，当用户做出新的选择时，或者当我试图在会话变量中使用搜索数据时，可以调用该函数

---

如果有更简单的方法，请让我知道。我只是想确保我没有不必要地编写额外的代码/我正在正确重构。

在每次AJAX调用加载新下拉列表时，您可以存储一个指示下拉列表状态的会话变量。然后，只需获取这些结果即可显示图标您以前选择的帐篷

---

编辑：

您所做的似乎很好。以下是一些改进建议：

• 您可以通过创建一个javascript变量（如

  var mainURL=；

  ）来去除jQuery中的PHP标记。这将允许您将函数放入一个可以缓存的文件中，从而更好地分离JS/PHP
• 为了获得更大的灵活性，考虑使用POST而不是GET如何？这可以允许添加一个变量，说明选择了哪个表单，并在返回的数据中添加一个变量来指示要填充的字段：因此，您只需要一个

  $.ajax

  实例

例如，类似于：

function updateForms(type,value){
 $.ajax({
      url:mainURL+"/mycontroller/getdata",
      type:"POST",
      data:{
            dropdownSelected:type,
            value:value
      },
      success:function(returnData){
            populate(returnData.form);
      });

---

在每次AJAX调用加载新的下拉列表时，您可以存储一个会话变量，该变量指示下拉列表的状态。然后，只需获取这些结果即可显示您以前选择的内容

---

编辑：

您所做的似乎很好。以下是一些改进建议：

• 您可以通过创建一个javascript变量（如

  var mainURL=；

  ）来去除jQuery中的PHP标记。这将允许您将函数放入一个可以缓存的文件中，从而更好地分离JS/PHP
• 为了获得更大的灵活性，考虑使用POST而不是GET如何？这可以允许添加一个变量，说明选择了哪个表单，并在返回的数据中添加一个变量来指示要填充的字段：因此，您只需要一个

  $.ajax

  实例

例如，类似于：

function updateForms(type,value){
 $.ajax({
      url:mainURL+"/mycontroller/getdata",
      type:"POST",
      data:{
            dropdownSelected:type,
            value:value
      },
      success:function(returnData){
            populate(returnData.form);
      });

---

在每次AJAX调用加载新的下拉列表时，您可以存储一个会话变量，该变量指示下拉列表的状态。然后，只需获取这些结果即可显示您以前选择的内容

---

编辑：

您所做的似乎很好。以下是一些改进建议：

• 您可以通过创建一个javascript变量（如

  var mainURL=；

  ）来去除jQuery中的PHP标记。这将允许您将函数放入一个可以缓存的文件中，从而获得一个